Layout
grid-area
grid-area goes on a grid item and sets the rows and columns it sits in at once. It is a shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.
Syntax
<grid-line> [ / <grid-line> ]{0,3}Preview
Code
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box > :nth-child(2) {
grid-area: 1 / 2 / 3 / 4;
}Controls
About
Values
Write four lines separated by /, in the order row start, column start, row end, column end (grid-area: 1 / 2 / 3 / 4). In horizontal text that is top, left, bottom, right, which goes round the opposite way to the top, right, bottom, left of margin and similar properties. Write each line as in grid-row and grid-column: auto, a line number or span 2.
Lines at the end can be left out. After line numbers or spans, lines left out become auto, so grid-area: 2 / 3 puts the item in a single cell in row 2, column 3. With spans only, as in span 2 / span 2, the item is still placed automatically, but two cells tall and two cells wide.
The preview on this page sets display: grid and grid-template-columns: repeat(3, 1fr) as helper declarations, placing four items in three columns of cells, and puts grid-area on the second item only (.box > :nth-child(2) is a selector for the second child of the box). No rows are written, so rows are created to fit how the items are placed. Item 2, with its rows and columns set, is placed first, and the other items then fill the free cells in HTML order.
Placing by name
When grid-template-areas on the container names ranges of cells, a single name such as grid-area: header places the item in that range. With one name, the three lines left out take the same name, which points to the header-start and header-end lines (the edges of the range). The controls on this page don't cover names yet, but you can type them into the code.
How line numbers count
Negative numbers count from the end of the columns and rows written in grid-template-columns and grid-template-rows (the explicit grid). The preview on this page writes three columns, so 1 / 1 / 2 / -1 fills the first row from edge to edge, but no rows are written, so a row end of -1 is the same as line 1.