CSS grid-auto-columns Property

Definition and Usage

The grid-auto-columns property sets the size of implicitly created column tracks. Implicit columns appear when items need more columns than grid-template-columns defines—for example with grid-auto-flow: column, or when an item is placed past the last explicit column.

It is set on the grid container, is not inherited, and the initial value is auto. Explicit columns from grid-template-columns are unchanged. For implicit rows, use grid-auto-rows.

CSS Syntax

A track size can be auto, a length, a percentage, fr, minmax(), min-content, max-content, or fit-content().

Property Values

You can list several sizes to repeat a pattern across successive implicit columns.

How to Use grid-auto-columns

Create a grid that needs extra columns, then size those extras on the container.

1. Set display: grid on the container.
2. Cause implicit columns: use grid-auto-flow: column, or place an item past the explicit columns.
3. Set grid-auto-columns to the width you want for those new columns.
4. Keep planned columns in grid-template-columns; this property does not replace that list.

Live Preview

Two fixed rows and grid-auto-flow: column. Six items create three implicit columns. Only grid-auto-columns changes.

CSS Examples

Each snippet focuses on grid-auto-columns. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid-template-rows: 60px 60px;
    grid-auto-flow: column;
    grid-auto-columns: 80px;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: grid;
    grid-template-rows: 60px 60px;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: grid;
    grid-template-rows: 60px 60px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(60px, 1fr);
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

Key Takeaways