CSS grid-template-columns Property
The grid-template-columns property defines the line names and track sizing functions of CSS grid columns.
Description & Usage
The grid-template-columns property is the core configuration for CSS Grid column layouts. It specifies the number of columns and their respective widths using track sizing functions.
Grid introduces powerful CSS units like fractional units (fr), which divide remaining free space proportionally among tracks. Combined with repeat() and minmax(), developers can build fully fluid multi-column layouts that auto-fit to screen size without media queries.
For example, repeat(auto-fit, minmax(250px, 1fr)) automatically creates as many 250px+ columns as can fit on screen, wrapping gracefully when space runs out.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Grid |
| Initial Value | none |
| Inherited | No (not inherited) |
| Applies To | Grid containers |
Syntax
grid-template-columns: none | repeat(3, 1fr) | 200px 1fr | repeat(auto-fit, minmax(200px, 1fr));Property Values
| Value | Description |
|---|---|
| repeat(N, 1fr) | Creates N equal-width columns sharing available space. |
| 1fr 2fr | First column gets 1 fraction, second column gets double space. |
| repeat(auto-fit, minmax(200px, 1fr)) | Creates responsive fluid grid without media queries. |
Code Examples
Responsive 3-Column Card Layout
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
Automatically wraps cards to new lines on smaller screens.