Skip to main content

Grid Row

Set the size & position of items across grid rows.

Widely available

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

Chrome
Edge
Firefox
Safari

gr-s:1
grid-row: span 1 / span 1;
gr-s:2
grid-row: span 2 / span 2;
gr-s:3
grid-row: span 3 / span 3;
gr-s:4
grid-row: span 4 / span 4;
gr-s:5
grid-row: span 5 / span 5;
gr-s:6
grid-row: span 6 / span 6;
gr-s:7
grid-row: span 7 / span 7;
gr-s:8
grid-row: span 8 / span 8;
gr-s:9
grid-row: span 9 / span 9;
gr-s:10
grid-row: span 10 / span 10;
gr-s:11
grid-row: span 11 / span 11;
gr-s:12
grid-row: span 12 / span 12;
gr-s:13
grid-row: span 13 / span 13;
gr-s:14
grid-row: span 14 / span 14;
gr-s:15
grid-row: span 15 / span 15;
gr-s:16
grid-row: span 16 / span 16;

Grid Row End

gre:1
grid-row-end: 1;
gre:2
grid-row-end: 2;
gre:3
grid-row-end: 3;
gre:4
grid-row-end: 4;
gre:5
grid-row-end: 5;
gre:6
grid-row-end: 6;
gre:7
grid-row-end: 7;
gre:8
grid-row-end: 8;
gre:9
grid-row-end: 9;
gre:10
grid-row-end: 10;
gre:11
grid-row-end: 11;
gre:12
grid-row-end: 12;
gre:13
grid-row-end: 13;
gre:14
grid-row-end: 14;
gre:15
grid-row-end: 15;
gre:16
grid-row-end: 16;

Grid Row Start

grs:1
grid-row-start: 1;
grs:2
grid-row-start: 2;
grs:3
grid-row-start: 3;
grs:4
grid-row-start: 4;
grs:5
grid-row-start: 5;
grs:6
grid-row-start: 6;
grs:7
grid-row-start: 7;
grs:8
grid-row-start: 8;
grs:9
grid-row-start: 9;
grs:10
grid-row-start: 10;
grs:11
grid-row-start: 11;
grs:12
grid-row-start: 12;
grs:13
grid-row-start: 13;
grs:14
grid-row-start: 14;
grs:15
grid-row-start: 15;
grs:16
grid-row-start: 16;

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.