Grid Column Track Property
Last updated: 2026-09-13
grid-template-columns Grid Column Track Property
The grid-template-columns property defines the number and width of the column tracks in a grid container. By specifying the size of each column track you control the column structure precisely, which makes it one of the most central settings of CSS Grid. It supports fixed lengths, percentages, the fr unit, and powerful functions such as repeat() and minmax().
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-template-columns: none | <track-list> | <auto-track-list>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No explicit column tracks |
<track-list> | <auto-track-list> | Type | Track list |
repeat() | Function | Repeated track definition |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-columns | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： The fr (fraction) unit represents one share of the available space. For example, 1fr 2fr splits the remaining space between two columns at a 1:2 ratio.
Tip： repeat(3, 1fr) is equivalent to 1fr 1fr 1fr and is much more concise for many repeated tracks.
❓ FAQ
QWhat is the difference between grid-template-columns and grid-auto-columns?
Agrid-template-columns defines the explicitly declared column tracks, the main structure of the grid. grid-auto-columns controls the width of the implicit columns: when a grid item is placed beyond the explicit columns, the extra columns the browser creates automatically are implicit. For example, with only two defined columns, the third and later grid items land in implicit columns governed by grid-auto-columns.
QWhat does minmax(200px, 1fr) mean?
Aminmax() sets a range for the track size: a minimum of 200px and a maximum of 1fr. The column is at least 200px wide, stretches according to 1fr when there is room, and stays at 200px when space is tight. It is often combined with repeat(auto-fill, minmax(200px, 1fr)) so the browser decides the number of columns from the container width, giving a responsive grid without media queries.
QWhat is the difference between auto-fill and auto-fit?
ABoth work with repeat() to let the column count adapt to the container width. auto-fill creates as many columns as possible and keeps empty tracks even when there is no content to place in them, so the column widths stay stable. auto-fit collapses the empty tracks to 0 and lets the columns with content stretch to fill the whole row. At the same width, auto-fit produces wider content columns, which suits cards that should fill the line; auto-fill fits layouts that must keep a fixed column width.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Row Tracks
Defines the number and height of grid row tracks
Grid Shorthand
Shorthand that defines a grid in one declaration
