Grid Template Columns

Set the columns for a grid layout.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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