Grid Column Start

Set the starting grid line for a grid item.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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