What does grid-auto-flow: column change about a CSS grid compared with its default value?

## The property in one line `grid-auto-flow` answers a single question: when the grid needs more room than the tracks you declared, which axis does it extend? The initial value is `row`. ## Default behaviour: grow downwards ```css .strip { display: grid; grid-template-columns: 120px 120px 120px; /* grid-auto-flow: row is the default */ grid-auto-rows: 80px; } ``` Items fill positions left to right along a row; when the row is full, the flow moves to the next one. Once the declared rows are exhausted (here none were declared at all), the browser creates implicit rows, and `grid-auto-rows: 80px` sizes each of them. The grid grows downwards, which is the direction a document naturally scrolls, so this default is almost always what you want. ## Column flow: grow sideways ```css .strip { display: grid; grid-template-rows: 80px 80px; grid-auto-flow: column; grid-auto-columns: 120px; } ``` Now the declared axis is rows, and the flow moves down each column before starting a new one. Twelve items in this grid produce two rows and six implicit columns, each 120px wide because `grid-auto-columns` says so. The part interviewers listen for is the property swap. In this grid a `grid-auto-rows` declaration has no effect at all — there are no implicit rows to size, since both rows are explicit. If someone flips `grid-auto-flow` to `column` and leaves a `grid-auto-rows` rule sitting above it, that rule is dead code and the new columns quietly fall back to `auto`, sizing to their content. ## Which axis is the declared one A useful symmetry: whichever axis you declare with a template, the other one is the one that grows. `grid-auto-flow: row` pairs naturally with `grid-template-columns` (you know how many across, not how many down). `grid-auto-flow: column` pairs with `grid-template-rows` (you know how many rows tall the strip is, not how many items will arrive). Declaring `grid-template-columns` *and* setting `grid-auto-flow: column` is a common accident. The declared columns are still explicit and still get filled first, but once they are full the grid keeps appending more columns to the right rather than wrapping to a second row — usually not what the author intended, and the visible symptom is a layout that shoots off the side of the viewport. ## Why the failure modes differ With row flow, an unexpected number of items makes the container taller. The page scrolls, nothing is cut off, and the worst case is a long page. With column flow, extra items make the container wider. Block containers do not grow the viewport, so you get horizontal overflow: content clipped or the whole page scrolling sideways. That is why column flow is a deliberate choice for a bounded, intentionally horizontal component — a media carousel, a kanban board of columns, a toolbar strip — and is paired with `overflow-x: auto` on the container so the sideways growth becomes a scroll instead of a bug. ```css .board { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; /* every lane is a fixed width */ gap: 12px; overflow-x: auto; /* growth becomes a scroller */ } ``` This is the canonical column-flow pattern: one row of lanes, an unknown number of them, each a predictable width, scrolling horizontally on purpose. ## Relationship to the rest of the grid `grid-auto-flow` only governs the axis of growth and the direction of automatic filling. It does not size anything itself — `grid-auto-rows` and `grid-auto-columns` do that. It does not move items you positioned yourself with explicit line placement; those keep their positions and the flow works around them. And it does not affect the explicit tracks at all: `grid-template-rows` still means the same thing whichever flow you choose. ## Answering it well Say what changes (axis of growth and fill direction), say which property follows it (`grid-auto-columns` instead of `grid-auto-rows`), and finish with the practical consequence — sideways growth means horizontal overflow, so column flow is a choice you make for components that are meant to scroll horizontally, not a stylistic preference.