Grid Template Rows

Utilities for specifying the rows in a grid layout.

Class	Properties
.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-none	grid-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

Responsive

To control the rows of a grid at a specific breakpoint, add @{breakpoint} the end of the utility.

Variants

By default, only responsive variants are generated for grid-template-columns utilities. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.