grid-row
Which rows a grid item occupies.
Syntax
grid-row: start / end;Values
| Parameter | Type | Description |
|---|---|---|
| start / end | lines | Line numbers: `1 / 3`. |
| span n | keyword | Spans n rows. |
Examples
An item two rows tall:
<style>
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid div { padding: 8px; background: plum; }
</style>
<div class="grid">
<div style="grid-row: span 2;">span 2 — two rows tall</div>
<div>1</div>
<div>2</div>
</div>Notes
Works the same way as grid-column, but vertically.
See also
- grid-column — Which columns a grid item occupies.
- grid-area — Places a grid item into a named area or between given lines.
- grid-template-rows — The number and heights of the rows of a grid.
In the tutorial
- Grid lines and areas — How to put an item in the right place of a grid — line numbers, grid-column and grid-row, span, named areas with grid-template-areas.