Grid Template Columns

Utilities for specifying the columns in a grid layout.

Class	CSS Output
`grid-cols-1`	`grid-template-columns: repeat(1, minmax(0, 1fr)); }`
`grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr)); }`
`grid-cols-6`	`grid-template-columns: repeat(6, minmax(0, 1fr)); }`
`grid-cols-12`	`grid-template-columns: repeat(12, minmax(0, 1fr)); }`
`grid-cols-none`	`grid-template-columns: none; }`
`grid-cols-subgrid`	`grid-template-columns: subgrid; }`
`grid-cols-(--my-template)`	`grid-template-columns: var(--my-template); }`
`grid-cols-[value]`	`grid-template-columns: [value] }`

grid-cols-1

grid-template-columns: repeat(1, minmax(0, 1fr));

grid-cols-3

grid-template-columns: repeat(3, minmax(0, 1fr));

grid-cols-6

grid-template-columns: repeat(6, minmax(0, 1fr));

grid-cols-12

grid-template-columns: repeat(12, minmax(0, 1fr));

grid-cols-none

grid-template-columns: none;

grid-cols-subgrid

grid-template-columns: subgrid;

grid-cols-(--my-template)

grid-template-columns: var(--my-template);

grid-cols-[value]

grid-template-columns: [value]

Reference

MDN ↗