Grid row start / end

Utilities for controlling how elements are sized and placed across grid rows


Class reference

ClassProperties
row-autogrid-row: auto;
row-span-1grid-row: span 1 / span 1;
row-span-2grid-row: span 2 / span 2;
row-span-3grid-row: span 3 / span 3;
row-span-4grid-row: span 4 / span 4;
row-span-5grid-row: span 5 / span 5;
row-span-6grid-row: span 6 / span 6;
row-span-fullgrid-row: 1 / -1;
row-start-1grid-row-start: 1;
row-start-2grid-row-start: 2;
row-start-3grid-row-start: 3;
row-start-4grid-row-start: 4;
row-start-5grid-row-start: 5;
row-start-6grid-row-start: 6;
row-start-7grid-row-start: 7;
row-start-autogrid-row-start: auto;
row-end-1grid-row-end: 1;
row-end-2grid-row-end: 2;
row-end-3grid-row-end: 3;
row-end-4grid-row-end: 4;
row-end-5grid-row-end: 5;
row-end-6grid-row-end: 6;
row-end-7grid-row-end: 7;
row-end-autogrid-row-end: auto;

# Spanning rows

Use the rows-span-{n} utilities to make an element span n rows.

1
2
3
<div class="grid grid-rows-3 grid-flow-col gap-4">
<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>

# Starting and ending lines

Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

1
2
3
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-start-2 row-span-2 ...">1</div>
<div class="row-end-3 row-span-2 ...">2</div>
<div class="row-start-1 row-end-4 ...">3</div>
</div>

# Responsive

To control the row placement of an element at a specific breakpoint, add a {screen}: prefix to any existing grid-row utility. For example, use md:row-span-3 to apply the row-span-3 utility at only medium screen sizes and above.

<div class="grid grid-rows-3 ...">
<div class="row-span-3 md:row-span-3 ..."></div>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.