CSS Grid and Flexbox are both powerful layout systems, but they serve different purposes. Grid is designed for two-dimensional layouts (rows and columns), while Flexbox is best for one-dimensional layouts (either a row or a column).

Key Differences

1
Grid handles two dimensions — rows and columns — at the same time.
2
Flexbox handles one dimension — either a row or a column — at a time.
3
Grid uses grid-template-rows and grid-template-columns to define structure, while Flexbox relies on flex-direction and flex-wrap.
4
Grid is content-out, meaning you define the structure and place items within it; Flexbox is content-in, meaning items flow based on content size.
5
Grid supports overlapping items and explicit grid positioning (using grid lines or areas), which Flexbox does not.

Example: Grid vs Flexbox

Difficulty: 5/10

Topics: layout models, responsive design, CSS architecture

Scenario Questions

0-2 years experience

1
We need a simple two‑column layout where the left column is fixed 200px and the right column fills the remaining space. Would you use Flexbox or Grid, and how would you implement it?
2
If you set display: grid on a container but only define grid-template-columns: repeat(3, 1fr), what happens to the children that exceed three items?
3
You have a navigation bar with items that should wrap onto a new line when the viewport shrinks. Which layout model would you pick and why?

2-5 years experience

1
You built a card component using Flexbox, but when the content grows the cards become uneven height. How could switching to Grid solve this, and what trade‑offs would you consider?
2
During a sprint you notice that a responsive dashboard built with Grid breaks on older browsers, while a Flexbox version works. How would you debug and decide which to keep?
3
Our design spec requires a masonry‑like gallery where items have varying heights but should fill gaps horizontally. Explain how you would approach this with Grid versus Flexbox.

5-8 years experience

1
We are refactoring a large e‑commerce product page that mixes header, sidebar, main content, and promotional tiles. How would you structure the layout using Grid, and what considerations would you make for maintainability and performance?
2
Explain how you would implement a CSS‑only solution for a complex form layout that needs both row‑wise alignment (Flexbox) and column‑spanning sections (Grid). What edge cases might you hit?
3
Our UI library needs to support both Grid and Flexbox APIs for layout components. How would you design the abstraction to let developers choose the right tool without duplication?

8+ years experience

1
Our company is migrating a legacy codebase that heavily uses floats and Flexbox to a modern Grid‑first architecture. Outline a migration strategy that minimizes risk and ensures cross‑team consistency.
2
When scaling a design system across multiple products, how do you decide when to expose Grid utilities versus Flexbox utilities, and how do you document the trade‑offs for future maintainers?
3
Consider a global theming system that needs to generate responsive breakpoints for both Grid and Flexbox layouts. How would you architect the token generation and CSS output to keep them in sync?

Follow-up Questions

❓Can you give an example where mixing both Grid and Flexbox in the same component made sense?
❓How do you handle fallback for browsers that don’t support Grid?
❓What impact does using Grid have on layout reflow compared to Flexbox?