Grid Row Start / End ​
Utilities for controlling how elements are sized and placed across grid rows.
| Class Name | CSS Equivalent |
|---|---|
| row-auto | grid-row: auto; |
| row-start-auto | grid-row-start: auto; |
| row-end-auto | grid-row-end: auto; |
| row-span-full | grid-row: 1 / -1; |
| row-span-1 | grid-row: span 1 / span 1; |
| row-span-2 | grid-row: span 2 / span 2; |
| row-span-3 | grid-row: span 3 / span 3; |
| row-span-4 | grid-row: span 4 / span 4; |
| row-span-5 | grid-row: span 5 / span 5; |
| row-span-6 | grid-row: span 6 / span 6; |
| row-span-7 | grid-row: span 7 / span 7; |
| row-span-8 | grid-row: span 8 / span 8; |
| row-span-9 | grid-row: span 9 / span 9; |
| row-span-10 | grid-row: span 10 / span 10; |
| row-span-11 | grid-row: span 11 / span 11; |
| row-span-12 | grid-row: span 12 / span 12; |
| row-span-13 | grid-row: span 13 / span 13; |
| row-start-1 | grid-row-start: 1; |
| row-end-1 | grid-row-end: 1; |
| row-start-2 | grid-row-start: 2; |
| row-end-2 | grid-row-end: 2; |
| row-start-3 | grid-row-start: 3; |
| row-end-3 | grid-row-end: 3; |
| row-start-4 | grid-row-start: 4; |
| row-end-4 | grid-row-end: 4; |
| row-start-5 | grid-row-start: 5; |
| row-end-5 | grid-row-end: 5; |
| row-start-6 | grid-row-start: 6; |
| row-end-6 | grid-row-end: 6; |
| row-start-7 | grid-row-start: 7; |
| row-end-7 | grid-row-end: 7; |
| row-start-8 | grid-row-start: 8; |
| row-end-8 | grid-row-end: 8; |
| row-start-9 | grid-row-start: 9; |
| row-end-9 | grid-row-end: 9; |
| row-start-10 | grid-row-start: 10; |
| row-end-10 | grid-row-end: 10; |
| row-start-11 | grid-row-start: 11; |
| row-end-11 | grid-row-end: 11; |
| row-start-12 | grid-row-start: 12; |
| row-end-12 | grid-row-end: 12; |
| row-start-13 | grid-row-start: 13; |
| row-end-13 | grid-row-end: 13; |
Grid Row Span Full ​
The .row-span-full class sets the grid-row property to span from the first to the last row, effectively spanning the full width of the grid container.
html
<div class="grid grid-rows-4 grid-flow-column gap-m w-full">
<div class="row-span-full [...]">1</div>
<div class="[...]">2</div>
<div class="[...]">3</div>
</div>Grid Row Span ​
The .row-span-1 through .row-span-12 classes set the grid-row property to span a specified number of rows within the grid container.
html
<div class="grid grid-rows-3 grid-flow-column gap-m w-full">
<div class="row-span-3 [...]">1</div>
<div class="col-span-2 [...]">2</div>
<div class="row-span-2 col-span-2 [...]">3</div>
</div>​
Grid Row Start and End ​
The .row-start-1 through .row-start-13 and .row-end-1 through .row-end-13 classes set the grid-row-start and grid-row-end properties to specific values, defining the starting and ending rows for the grid item.
html
<div class="grid grid-rows-6 grid-flow-column gap-m w-full">
<div class="[...]">1</div>
<div class=" row-start-3 row-end-6 [...]">2</div>
<div class="[...]">3</div>
<div class="[...]">4</div>
<div class="[...]">5</div>
<div class="[...]">6</div>
</div>