HTML & CSS
/Intermediate
Grid Auto Flow
Definition
The `grid-auto-flow` property controls how the auto-placement algorithm works, specifying exactly how auto-placed items flow into the grid.
Explain Like I'm New
If you define a 2x2 grid (4 cells), but you throw 5 items into the container, what does the grid do with the 5th item? By default, it automatically adds a new Row. `grid-auto-flow: column` forces it to add a new Column instead, creating a horizontal scrolling effect.
Real World Example
Creating horizontal scrolling movie carousels (like Netflix). You set `grid-auto-flow: column` and `overflow-x: scroll`, and items naturally flow off the right side of the screen.
Common Use Cases
- •Horizontal scrolling lists
- •Dense masonry layouts (like Pinterest)
Interactive Example
Interview Questions
basic
- What is the default value of `grid-auto-flow`?
intermediate
- What does `grid-auto-flow: dense` do?