Elements logo

Grid template rows

Utilities for specifying the rows in a grid layout

Class reference

ClassProperties
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-nonegrid-template-rows: none;

Usage

Use the grid-rows-{n} utilities to create grids with n equally sized rows.

1
2
3
4
5
6
7
8
9
<div class="h-64 grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

Responsive

To control the columns of a grid at a specific breakpoint, add a {screen}: prefix to any existing grid-template-columns utility. For example, use md:grid-cols-6 to apply the grid-cols-6 utility at only medium screen sizes and above.

<div class="grid grid-rows-2 md:grid-rows-6 ...">
  <!-- ... -->
</div>

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