grid
grid-area
Places a grid item into a named template area or into a specific span of rows and columns. It is the shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end.
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>Common values
| Value | Effect |
|---|---|
| header | Assigns item to the named 'header' area |
| 1 / 1 / 3 / 3 | Spans rows 1-3 and columns 1-3 |
| auto | Item is placed automatically by the grid algorithm |
Examples
.layout { display: grid; grid-template-areas: 'nav main' 'nav footer'; } .nav { grid-area: nav; }Named-area layout with a sidebar
.hero { grid-area: 1 / 1 / 3 / -1; }Spans two rows and all columns
.ad { grid-area: sidebar; }Places element into named sidebar area
Gotcha
Named areas must be defined on the parent via grid-template-areas; unknown names simply do nothing.
Related properties
grid-column
Shorthand for grid-column-start and grid-column-end, controlling how many columns a grid item spans. Accepts line numbers, named lines, or span keywords.
grid-template-columns
Defines the number, size, and naming of columns in a grid container. Supports flexible fr units, repeat(), minmax(), and auto-fit/auto-fill for responsive layouts.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.