CSS grid-auto-columns Property

What You’ll Learn

The grid-auto-columns property controls how wide automatically created grid columns become when your layout needs more columns than you explicitly defined.

Introduction

The grid-auto-columns property in CSS is used in grid layouts to define the size of implicitly created columns. When items are placed outside the explicitly defined grid, new columns are created automatically.

The grid-auto-columns property specifies the size of these newly created columns, ensuring a consistent layout.

Definition and Usage

Set grid-auto-columns on a grid container alongside display: grid and grid-template-columns. Explicit columns come from your template; any extra columns the browser generates use the grid-auto-columns size. Pair with grid-auto-flow: column when items should fill rows first and spill into new columns.

📝 Syntax

The syntax for the grid-auto-columns property is straightforward. You can specify a single value or multiple values separated by spaces:

element {
  grid-auto-columns: value;
}

Here, value can be any valid length, percentage, or keyword that defines the column size.

Basic Example

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 100px;
}

Default Value

The default value of the grid-auto-columns property is auto, which means the size of the implicitly created columns will be determined by the content inside them.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Accepts one or more track sizes separated by spaces for repeating patterns.
• Affects implicit columns only; use grid-template-columns for explicit tracks.
• The property is not inherited.
• Often used with grid-auto-flow to control how items create implicit tracks.

💎 Property Values

Examples Gallery

Set implicitly created columns to 100 pixels, then explore minmax, content keywords, and a horizontal card strip.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 10px;
}

.grid-container {
  grid-template-columns: 200px;
  grid-auto-columns: minmax(120px, 1fr);
  grid-auto-flow: column;
}

.narrow-cols { grid-auto-columns: min-content; }
.wide-cols { grid-auto-columns: max-content; }

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 10rem;
  gap: 1rem;
  overflow-x: auto;
}

♿ Accessibility

• Ensure horizontal scroll areas are keyboard accessible when using column auto-flow galleries.
• Do not rely on column width alone to convey data relationships; use table headers or labels.
• Test zoom and small screens so implicit columns do not cause unreadable overflow.
• Keep touch targets wide enough even when min-content shrinks columns.
• Maintain logical tab order when items flow into implicit columns.

💡 Best Practices