Flexbox vs CSS Grid: Which Should You Use?
A staple CSS interview question. The rule of thumb is simple: Flexbox for one dimension, Grid for two — and they're often used together.
One dimension vs two
Flexbox lays items out along a single axis — a row OR a column. Grid places items in two dimensions at once — rows AND columns. Use Flexbox for navbars, toolbars and button groups; use Grid for page layouts and card galleries.
.nav { display: flex; justify-content: space-between; }
.page { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }They compose
Real layouts use both: Grid for the overall page structure, Flexbox inside each cell to align its contents. Grid's auto-fit + minmax() also gives you responsive card layouts with zero media queries.
Master HTML & CSS for interviews
The box model, Flexbox, Grid, responsive and modern CSS — the HTML & CSS Handbook is included in the Complete Frontend Kit.
⚡ Get the Complete Frontend Kit → ₹499Frequently asked questions
- Can Grid replace Flexbox?
- For many layouts, yes — but Flexbox is still simpler for distributing items along one axis. Pick the tool that matches the problem's dimensionality.
- How do I center a box with each?
- Flexbox: justify-content: center + align-items: center. Grid: place-items: center — the shortest centering trick in CSS.