Grid Row End

Set where a grid item ends within the grid rows.

Widely available

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

Chrome
Edge
Firefox
Safari

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;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:gre-(value)
Small≥640px
md:gre-(value)
Medium≥768px
lg:gre-(value)
Large≥1024px
xxl:gre-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:gre-(value)