grid-auto-flow

grid-auto-flow controls where Grid places items that do not have fully definite placement. It chooses a row or column direction and optionally a dense packing strategy.

Fill rows in source order

There are three explicit columns. Default row placement fills a row before creating the next one.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Compare sparse and dense packing

A and B each span two of three columns. In sparse placement, C follows B. In dense placement, C fills the earlier one-cell hole beside A. The DOM remains A, B, C in both examples.

<p>Sparse row placement</p>
<div class="layout">
  <div class="wide">A</div>
  <div class="wide">B</div>
  <div>C</div>
</div>
<p>Dense row placement</p>
<div class="layout dense">
  <div class="wide">A</div>
  <div class="wide">B</div>
  <div>C</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 0.5rem;
  margin-block: 0.75rem;
}
.dense {
  grid-auto-flow: row dense;
}
.wide {
  grid-column: span 2;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Values and prerequisites

The initial value is row and the property is not inherited. Column fills each column first; define a row template so there is a known row capacity before additional columns are created. Dense can accompany either direction; dense alone implies row.

The algorithm may create implicit tracks. Their sizes come from grid-auto-rows and grid-auto-columns, not from auto-flow itself. Explicitly placed items occupy cells before remaining automatic placements are resolved.

Dense is not a reading-order fix

Dense placement can show later items ahead of earlier ones. It does not reorder the accessibility tree or ordinary keyboard focus traversal. Avoid it for ordered steps and controls when a visual/source mismatch would confuse readers. Its usefulness depends on genuine holes: without differently spanning items, a dense label may show no visible change.

Learn order and grid-column before deliberately changing visual arrangement.

Sources and browser support

MDN: grid-auto-flow 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.