Grid Column End

Set where a grid item ends within the grid columns.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:gce-(value)
Small≥640px
md:gce-(value)
Medium≥768px
lg:gce-(value)
Large≥1024px
xxl:gce-(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:gce-(value)