Layout
grid-row
grid-row goes on a grid item and sets which rows it sits in and how many rows it spans. It is a shorthand for grid-row-start and grid-row-end.
Syntax
<grid-line> [ / <grid-line> ]?Preview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
}
.box > :nth-child(2) {
grid-row: span 2;
}Controls
About
Values
It works like grid-column: write the start line and the end line separated by / (grid-row: 1 / 3). Row lines are numbered 1, 2 and so on from the top.
auto: the initial value. Items go into the free cells in order and are one row tall.- A line number:
2starts at line 2, putting the item in the second row. Negative numbers count from the bottom (the end). There is no line 0. span 2: how many rows to span.
The preview on this page sets display: grid and grid-template-columns: 1fr 1fr as helper declarations, placing four items in two columns of cells, and puts grid-row 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 the items and how they are placed.
Items with a set row go first
Items with a set row number are placed before the other items, in the leftmost free cell of that row. With 1 / 3, item 2 goes into the first column, ahead of item 1. The other items then fill the free cells in HTML order.
In a box without written rows
Negative numbers count from the bottom edge of the rows written in grid-template-rows (the explicit grid). In a box without written rows, like the preview on this page, -1 is the same as line 1, so 1 / -1 only covers a single row. To span every row, write the rows with grid-template-rows or give the number of rows with span.
Not covered on this page
Line names set in grid-template-rows are not covered by the controls on this page yet, but you can type them into the code. grid-area sets rows and columns together.