Skip to main content

Grid Template Rows

Set the rows for a grid layout.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

gtr:1
grid-template-rows: repeat(1, minmax(0, 1fr));
gtr:2
grid-template-rows: repeat(2, minmax(0, 1fr));
gtr:3
grid-template-rows: repeat(3, minmax(0, 1fr));
gtr:4
grid-template-rows: repeat(4, minmax(0, 1fr));
gtr:5
grid-template-rows: repeat(5, minmax(0, 1fr));
gtr:6
grid-template-rows: repeat(6, minmax(0, 1fr));
gtr:7
grid-template-rows: repeat(7, minmax(0, 1fr));
gtr:8
grid-template-rows: repeat(8, minmax(0, 1fr));
gtr:9
grid-template-rows: repeat(9, minmax(0, 1fr));
gtr:10
grid-template-rows: repeat(10, minmax(0, 1fr));
gtr:11
grid-template-rows: repeat(11, minmax(0, 1fr));
gtr:12
grid-template-rows: repeat(12, minmax(0, 1fr));
gtr:13
grid-template-rows: repeat(13, minmax(0, 1fr));
gtr:14
grid-template-rows: repeat(14, minmax(0, 1fr));
gtr:15
grid-template-rows: repeat(15, minmax(0, 1fr));
gtr:16
grid-template-rows: repeat(16, minmax(0, 1fr));
gtr:s
grid-template-rows: subgrid;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.