grid-row
Place a grid item between row lines or across a number of rows.
Overview
| Class | Declarations |
|---|---|
grid-row:1/3 | grid-row: 1/3;
|
grid-row-span:2 | grid-row: span 2/span 2;
|
grid-row-start:1 | grid-row-start: 1;
|
grid-row-end:3 | grid-row-end: 3;
|
Basic usage
Place an item by rows
grid-row:1/3 places the blue item between row lines 1 and 3, covering the first two 48px rows and their 16px gap. Compare 1/-1, which covers all three explicit rows.
<div id="layout" class="grid grid-cols:2 grid-template-rows:repeat(3,48px) gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-row:1/3 p-sm">1 → 3</div> <div id="peer" class="grid-col:2 p-sm">02</div> <div id="item-3" class="grid-col:2 p-sm">03</div> <div id="item-4" class="grid-col:2 p-sm">04</div></div><div id="layout" class="grid grid-cols:2 grid-template-rows:repeat(3,48px) gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-row:1/-1 p-sm">1 → −1</div> <div id="peer" class="grid-col:2 p-sm">02</div> <div id="item-3" class="grid-col:2 p-sm">03</div> <div id="item-4" class="grid-col:2 p-sm">04</div></div>Row line numbers follow the block direction. Negative indices count from the end of the explicit rows, not any additional implicit rows. Use grid-row-start:1 and grid-row-end:3 when setting each edge separately.
Span rows
grid-row-span:2 spans two rows while leaving placement automatic. The blue item takes the first available pair of cells in one column; the next items fill the unoccupied cells. A span includes any gap between its tracks.
<div id="layout" class="grid grid-cols:2 grid-template-rows:repeat(3,48px) gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-row-span:2 p-sm">2 rows</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div></div>A span sets the number of tracks, not a fixed height. Use explicit row lines when the item must begin at a particular boundary.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. The blue item starts in one row. From sm, it spans all three explicit rows. The other items stay in the second column.
<div id="layout" class="grid grid-cols:2 grid-template-rows:repeat(3,48px) gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-row:auto p-sm grid-row:1/-1@sm">Target</div> <div id="peer" class="grid-col:2 p-sm">02</div> <div id="item-3" class="grid-col:2 p-sm">03</div> <div id="item-4" class="grid-col:2 p-sm">04</div></div>