Grid Auto Flow

Definition

Utilities for controlling how the auto-placement algorithm works, specifying exactly how items flow into the grid.

Explain Like I'm New

When you dump 10 items into a grid, do they fill up the columns first (left-to-right), or do they fill up the rows first (top-to-bottom)? Auto-flow lets you decide.

Real World Example

Using `grid-flow-col` to create a horizontal scrolling carousel where items naturally stack sideways into columns instead of wrapping downward.

Common Use Cases

•Dense photo grids
•Horizontal carousels

Interactive Example

Interview Questions

basic

What is the default auto-flow direction for CSS Grid?

intermediate

What does the `grid-flow-row-dense` class do?

Flash Cards

Question

Default direction?

Click to reveal answer

Answer

Row (left-to-right, then wraps down to the next row).

Question

dense?

Click to reveal answer

Answer

If you have items of different sizes (`col-span-2`), sometimes they leave ugly empty holes in the grid. `dense` tells the browser's algorithm to go back and pack smaller items into those empty holes, completely rearranging your HTML order to make the grid fit perfectly like Tetris.