grid
grid-template-columns
Defines the number, size, and naming of columns in a grid container. Supports flexible fr units, repeat(), minmax(), and auto-fit/auto-fill for responsive layouts.
grid-template-columns: none | <track-list> (e.g. 1fr 2fr | repeat(3, 1fr) | minmax(200px, 1fr))Common values
| Value | Effect |
|---|---|
| 1fr 1fr 1fr | Three equal-width columns |
| repeat(4, 1fr) | Shorthand for four equal columns |
| repeat(auto-fit, minmax(240px, 1fr)) | Responsive columns that fill the row |
| 200px 1fr | Fixed sidebar plus fluid main |
| auto | Column sizes to its content |
Examples
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }Card grid that reflows across breakpoints
.layout { display: grid; grid-template-columns: 240px 1fr; }Fixed sidebar, fluid main content
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); }Even four-column KPI row
Gotcha
auto-fit collapses empty tracks, while auto-fill preserves them; pick based on whether you want stretched or empty slots.
Related properties
grid-column
Shorthand for grid-column-start and grid-column-end, controlling how many columns a grid item spans. Accepts line numbers, named lines, or span keywords.
grid-area
Places a grid item into a named template area or into a specific span of rows and columns. It is the shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.