CSS grid-auto-columns: Sizing Implicit Columns

The CSS grid-auto-columns property defines the size of implicit column tracks that are generated automatically when grid items are positioned outside of the explicitly defined column template. When a grid item overflows the explicit grid—either through manual positioning or via column-based automatic placement—the browser creates new tracks on the fly. This article explains the mechanics behind implicit column generation, how grid-auto-columns calculates their dimensions, and how to apply various sizing functions to control them.

What Are Implicit Columns?

In CSS Grid, explicit columns are defined using grid-template-columns. However, a grid container often needs to accommodate items that do not fit into these predefined tracks. This occurs in two main scenarios:

1. Manual Placement Beyond the Template: An item is explicitly placed into a track index that does not exist in the explicit grid (for example, setting grid-column: 4 when only two columns are declared in grid-template-columns).
2. Column-Based Auto-Placement: The grid-auto-flow property is set to column (or column dense), causing extra auto-placed items to generate new columns instead of wrapping into rows.

When either situation occurs, the browser creates implicit columns to hold the items. Without instruction, these tracks default to auto, sizing dynamically based on their content.

How grid-auto-columns Works

The grid-auto-columns property dictates the width of every implicit column track created outside the template.

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px; /* Explicit columns */
  grid-auto-columns: 150px;           /* Implicit columns */
}

In this setup, the first two columns have an explicit width of 200px. If an item is assigned to grid-column: 3 or beyond, the browser automatically instantiates those tracks with a width of 150px.

Supported Sizing Units and Functions

The grid-auto-columns property accepts any standard CSS Grid track sizing value:

• Fixed Lengths: Values like px, rem, or em define an exact track size (e.g., grid-auto-columns: 120px).
• Percentages: Relative units (e.g., 25%) scale against the grid container's inline size.
• Flexible Units (fr): Distributes leftover space. For example, grid-auto-columns: 1fr forces implicit columns to share remaining container space equally.
• Keywords (min-content, max-content, auto): Sizes the column strictly according to the smallest or largest intrinsic content size of its children.
• minmax(): Sets a range allowing responsive behavior (e.g., grid-auto-columns: minmax(100px, auto) ensures tracks do not shrink below 100px but can expand to fit content).
• fit-content(): Clamps the track size between an intrinsic maximum and a defined length argument.

Handling Multiple Sizing Values

You can specify multiple track sizes within grid-auto-columns. When multiple values are provided, the browser cycles through them in sequence as it generates consecutive implicit columns:

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100px 200px;
}

In this case, the first implicit column will be 100px, the second will be 200px, the third will alternate back to 100px, and so on. This repeating pattern enables complex, dynamic layouts where track dimensions vary predictably without requiring individual track declarations.