Grid Template Columns

Set the columns for a grid layout.

baselinewidely

Class	CSS
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));
gtc:s	grid-template-columns: subgrid;

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:gtc:4.

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

Apply a class only while the element is in a state, such as hovered, focused or checked.

Style a part of the element rather than the element itself, such as its placeholder or the selected text.