Grid Template Rows

Utilities for specifying the rows in a grid layout.

Class Name	CSS Equivalent
grid-rows-none	grid-template-rows: none;
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7	grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8	grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9	grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10	grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11	grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12	grid-template-rows: repeat(12, minmax(0, 1fr));

Grid Rows

The .grid-rows-1 through .grid-rows-12 classes set the grid-template-rows property to create a specified number of equally spaced rows within the grid container.

<div class="grid grid-rows-6 gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>

1

2

3

4

Grid Rows None

The .grid-rows-none class sets the grid-template-rows property to none, effectively removing any rows from the grid container.

<div class="grid grid-rows-none gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3