grid-template-columns
The grid-template-columns property defines the number and size of columns in a grid container.
Syntax
grid-template-columns: <track-size>...; /* e.g. repeat(3, 1fr) */
Examples
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
Output
Renders a responsive card grid where columns are at least 220px wide and wrap to fill the row.
Notes
Use fr units for flexible tracks, repeat() for repetition, and minmax() with auto-fill or auto-fit for responsive grids without media queries. Named lines in brackets aid placement.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 57 |
| firefox | 52 |
| safari | 10.1 |
| edge | 16 |