CSS · Layout and visual systems
When should you use Flexbox versus Grid?
Short answer
Flexbox is best for one-dimensional distribution and content-driven sizing. Grid is best for two-dimensional layouts where you control rows and columns. They are often used together.
The useful distinction is dimensionality and direction of control. Flexbox distributes items along one axis and lets content influence size. Grid defines a structure in two axes and places items into it.
.toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dashboard {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1.5rem;
}Choose based on the problem
- Flexbox: navigation bars, button groups, centering, distributing space in a row or column
- Grid: page shells, card galleries, forms with aligned labels, overlapping layers
- Flexbox lets content determine track size more naturally
- Grid lets the container determine the structure and alignment in both axes
- They compose: a grid cell can contain a flex row, and a flex item can be a grid container
Do not treat the choice as ideological. If a row needs items to wrap and share space, flexbox is usually simpler. If a layout needs columns and rows to line up across components, grid removes hacks.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What does one-dimensional versus two-dimensional mean here?
- 2Can you nest Grid and Flexbox?
- 3Which is better for a card grid?
- 4When is content-driven sizing an advantage?
Say it in the interview
I choose flexbox when the layout is a single row or column and I want content to influence sizing. I choose grid when I need rows and columns to align together, like a page shell or card gallery. The choice is about the structure I am expressing, not about one being newer. They compose well: grid for the page, flex for the small pieces inside it.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.