grid-auto-columns

Definition

The grid-auto-columns CSS property is used in grid layouts to set the size of implicitly created columns when the grid items do not explicitly specify their own column sizes.

The grid-auto-columns property accepts a value or a series of values, such as length values (e.g., 200px, auto), percentage values (e.g., 50%), or minmax() functions (e.g., minmax(100px, 1fr)).

Here’s an example:

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

In this example, the grid-auto-columns: 200px; rule sets the width of implicitly created columns in a grid container to 200 pixels. When grid items do not explicitly specify their own column sizes, these columns will be automatically created with a width of 200 pixels.

The grid-auto-columns property provides control over the sizing of implicitly created columns in grid layouts, ensuring consistent column widths and helping to achieve the desired grid structure.

Syntax

.gallery {
  display: grid;
  grid-auto-columns: 12rem;
}

Values

• auto (default), <length>, <percentage>, minmax() etc.

Practical Examples

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 12rem;
  gap: 1rem;

Set the size of implicitly created columns.

<div class="grid auto-cols-[12rem] auto-flow-col gap-4 overflow-x-auto rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <div class="h-32 rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Card 1</div>
  <div class="h-32 rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Card 2</div>
  <div class="h-32 rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Card 3</div>
</div>

Tips & Best Practices

• Use with grid-auto-flow: column for horizontal carousels.
• Combine with minmax() to keep columns responsive.

Accessibility & UX Notes

Implicit sizing prevents overflow, keeping carousels navigable.

Browser Support

Supported in modern browsers; IE lacks full grid support.

Related

• grid-auto-flow, grid-auto-rows.
• grid-template-columns for explicit tracks.