Auto Placement

CSS Grid's auto-placement algorithm places items automatically when you don't specify their positions. You can control the flow direction, implicit track sizes, and how items fill the grid.

grid-auto-flowgrid-auto-rowsgrid-auto-columns

1. Default: grid-auto-flow: row

By default, items are placed across columns first, then wrap to the next row. This is grid-auto-flow: row. New rows are created automatically as needed.

Live Demo

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* default — fill rows first */
}
/* Items: 1 2 3 / 4 5 6 / 7 ... */

2. grid-auto-flow: column

With column flow, items fill column tracks first, then move to the next column. This is useful for vertical lists that should flow into multiple columns.

Live Demo

CSS

.container {
  display: grid;
  grid-template-rows: repeat(3, 60px); /* 3 rows defined */
  grid-auto-flow: column; /* fill columns first */
}
/* Items: 1  4  7
          2  5  8
          3  6  9 */

💡 With column flow, you define the rows and the browser creates columns automatically.

3. grid-auto-rows — Implicit Row Heights

When items overflow your defined rows, the browser creates implicit rows. grid-auto-rows controls the height of these auto-generated rows.

Live Demo

CSS

.container {
  grid-template-columns: repeat(3, 1fr);
  /* no grid-template-rows — rows are implicit */
  grid-auto-rows: 80px; /* each auto row = 80px */
}

/* or use minmax for flexible implicit rows: */
.container {
  grid-auto-rows: minmax(80px, auto);
}

💡 grid-auto-rows: minmax(80px, auto) is very common — rows are at least 80px but expand to fit taller content.

4. grid-auto-columns — Implicit Column Widths

Similarly, grid-auto-columns sets the size of implicitly created column tracks when items are placed outside the defined columns.

Live Demo

CSS

.container {
  grid-template-rows: repeat(2, 60px);
  grid-auto-flow: column;
  /* implicit columns will be 120px wide */
  grid-auto-columns: 120px;
}

5. Mixing Explicit & Auto with Placement

When some items are explicitly placed and others are auto-placed, the auto-placement algorithm fills in the gaps around explicitly placed items.

Live Demo

Explicit: col 1–3, row 1

auto

Explicit: col 3–5, row 2

auto

CSS

.container {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 60px;
}
/* Explicitly placed items reserve their cells */
.explicit-a { grid-column: 1 / 3; grid-row: 1; }
.explicit-b { grid-column: 3 / 5; grid-row: 2; }
/* Remaining items fill the gaps automatically */