How does CSS Grid differ from Flexbox?
In short
Flexbox is for one axis, Grid is for two.
The core difference
| What | Flexbox | Grid |
|---|---|---|
| Axes | A one-dimensional system (either a row or a column) | A two-dimensional system (rows + columns at once) |
| When it's handy | Aligning and distributing elements in a line | Building full-fledged layouts and grids |
| Logic | The content "itself" shapes the structure | The grid is defined first, then the content is laid out |
| Control | justify-content and align-items along one axis | Precise control over rows and columns (grid-template-*, grid-area) |
| Scenarios | Menus, buttons, cards in a row, headers, elements in a block | Galleries, full-fledged page layouts, grids, tables, complex designs |
A simple way to remember
- Flexbox: flow-based, "elements arrange themselves"
- Grid: a "blueprint", you define the grid and place elements by coordinates
Summary
Flexbox is for aligning within a row or column. Grid is for building the grid of a layout.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.