Implicit Column Track Property
Last updated: 2026-09-13
grid-auto-columns Implicit Column Track Property
The grid-auto-columns property controls the width of the implicitly created column tracks in a grid container. When a grid item is placed into a column that grid-template-columns did not define, the browser creates an implicit column automatically; this property sets the size of those auto-created columns. It is very useful when dealing with dynamic content or an unknown number of grid items.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-auto-columns: <track-size>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Computed automatically |
<length> | <percentage> | Type | Fixed implicit column width |
minmax() | Function | Min/max size |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-columns | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Implicit columns usually appear because an item was explicitly placed into a column beyond the explicit grid.
Tip： minmax(100px, auto) gives an implicit column a minimum width while letting it stretch with the content.
❓ FAQ
QWhen do grid-auto-columns and grid-template-columns apply at the same time?
AAn implicit column is created whenever a grid item lands in a column that grid-template-columns did not define, and grid-auto-columns then decides the width of those extra columns. For example, with only two defined columns, a third item (either auto-placed or positioned to column 3 with grid-column) falls into an implicit column. Explicit and implicit columns can coexist, each following its own sizing rules.
QHow do I make all columns the same width with a variable column count?
AUse grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). The browser picks the number of columns from the container width; each column is at least 200px and stretches when space remains. auto-fill creates as many 200px-minimum tracks as fit, so no extra columns are produced and the grid stays responsive across breakpoints without media queries. Combined with gap, this recipe gives a grid whose column count adapts and whose widths stay uniform.
QWhen are implicit columns created?
AImplicit columns appear when an item is placed beyond the explicit columns. For instance, a container with only two columns: the third item lands in column 3 when auto-placed, or an item is explicitly placed at column 4 with grid-column: 4. Those extra columns are implicit and their width comes from grid-auto-columns. Horizontally scrolling lists often use this: one explicit first column and the rest left to grid-auto-columns.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Implicit Row Tracks
Controls the height of implicit rows
Grid Column Tracks
Defines the structure of explicit columns
