Grid Row Start / End

Basic usage

Spanning rows

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

<div className="grid grid-rows-3 grid-flow-col gap-4">
  <div className="**row-span-3** ...">01</div>
  <div className="col-span-2 ...">02</div>
  <div className="**row-span-2** col-span-2 ...">03</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.

<div className="grid grid-rows-3 grid-flow-col gap-4">
  <div className="**row-start-2** row-span-2 ...">01</div>
  <div className="**row-end-3** row-span-2 ...">02</div>
  <div className="**row-start-1 row-end-4** ...">03</div>
</div>