grid-auto-columns

grid-auto-columns sizes columns that are not sized by grid-template-columns. Grid can create them through automatic placement or placement beyond the explicit grid.

Add columns after two rows fill

Column flow fills two defined rows, then creates another column. Every implicit column is 90px wide; this setting is on the container.

<div class="layout" tabindex="0" role="region" aria-label="Column size example">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.layout {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-auto-flow: column;
  grid-auto-columns: 90px;
  gap: 0.5rem;
  overflow: auto;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

A horizontally scrollable collection

Column flow with one row creates as many columns as there are cards. A bounded card width and an explicitly scrollable, named region keep extra columns accessible.

<div class="layout" tabindex="0" role="region" aria-label="Practice cards">
  <div>Read the code</div>
  <div>Change a value</div>
  <div>Compare the result</div>
  <div>Try a narrow screen</div>
</div>

.layout {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10rem, 14rem);
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Values and percentages

The initial value is auto and the property is not inherited. Lengths, percentages, fractions, intrinsic keywords, minmax(), and fit-content() size implicit tracks. A list such as 80px 120px repeats its sizing pattern across successive implicit tracks; this property does not accept repeat() notation.

Column percentages resolve against the grid container’s inline size. If that size depends on its tracks, percentages are treated as auto during intrinsic sizing and then resolved for layout. Adding percentage widths and gaps can exceed the container.

Why a column did not change

An explicitly sized column follows grid-template-columns. Grid-auto-columns does not override it or guarantee freedom from overflow. Item content and minimum sizing still matter. A child’s width is also different from its track’s width.

Learn grid-auto-flow for the creation direction and overflow for reachable content.

Sources and browser support

MDN: grid-auto-columns describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid specification defines track sizing, shorthand resets, and placement.