CSS grid-auto-flow Property

Definition and Usage

The grid-auto-flow property controls how auto-placed items fill a grid. Choose row or column for the fill direction, and optionally add dense to pack into earlier empty cells.

Set it on the grid container. It is not inherited. The initial value is row. Explicitly placed items (with grid-area, grid-row, or grid-column) keep their positions; only auto-placed items follow this property.

CSS Syntax

Use one keyword, or pair a direction with dense (for example row dense).

Property Values

Without dense, placement is sparse: the algorithm only moves forward and may leave empty cells.

How to Use grid-auto-flow

Build a grid, leave some items auto-placed, then pick the fill direction.

1. Set display: grid and define tracks with grid-template-columns or rows.
2. Leave items without line placement so they auto-place.
3. Set grid-auto-flow to row or column.
4. Add dense only when filling holes matters more than source order.

Live Preview

A 3×3 track grid. Items 1 and 2 span two columns, which can leave a hole. Change grid-auto-flow and watch auto-placement.

CSS Examples

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

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
  }
</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;
  }
</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-columns: 1fr 1fr 1fr;
    grid-auto-flow: row dense;
  }

  .wide {
    grid-column: span 2;
  }
</style>

<section>
  <div class="wide">1</div>
  <div class="wide">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>

Key Takeaways