Flexbox vs Grid: When to Use Which (With Clear Examples)
Flexbox and CSS Grid solve different layout problems. Here's the simple rule for choosing between them, with examples of when each one is the right tool.
- →Flexbox is one-dimensional (a row or a column); CSS Grid is two-dimensional (rows and columns together).
- →Use Flexbox for content laid out in a single direction, like a navbar or a row of buttons.
- →Use Grid for overall page layouts and any structure that needs rows and columns at once.
- →They work together: Grid for the page skeleton, Flexbox for aligning content inside cells.
- →Neither replaces the other, choosing right just makes the CSS simpler.
Flexbox vs Grid is one of the most common CSS questions, and the answer is simpler than most tutorials make it. They aren't competitors; they solve different shaped problems. Once you know the one key difference, choosing becomes automatic.
The one difference that decides everything
Flexbox is one-dimensional: it lays items out along a single axis, either a row or a column. CSS Grid is two-dimensional: it controls rows and columns at the same time. That's the whole distinction, and it tells you which to use.
| Flexbox | CSS Grid | |
|---|---|---|
| Dimension | One (row OR column) | Two (rows AND columns) |
| Best for | Content flow in one direction | Overall layout structure |
| Sizing | Content-driven | Layout-driven |
| Example | Navbar, button group, card footer | Page layout, image gallery, dashboard |
When to use Flexbox
Reach for Flexbox when items sit in a single line and you care about spacing and alignment along that line. Classic cases: a navbar, a toolbar, centering something, or spacing items apart.
.navbar {
display: flex;
align-items: center; /* vertical centering */
justify-content: space-between; /* push items apart */
gap: 1rem;
}When to use CSS Grid
Reach for Grid when you're placing items into a two-dimensional structure, or when the layout should drive the sizing rather than the content. Page layouts, galleries and dashboards are Grid's home turf.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}Quick test: if you can describe the layout as 'a row of things' or 'a column of things', use Flexbox. If you're describing rows and columns together, use Grid.
The best part: use them together
This isn't either/or. The most common real-world pattern is Grid for the big picture and Flexbox for the details. Grid places the cards; Flexbox aligns the content inside each card.
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.card { display: flex; flex-direction: column; justify-content: space-between; }Grid for the page, Flexbox for the pieces. Almost every modern layout is some combination of the two.
The short version
Flexbox is one-dimensional, use it for content in a single row or column like navbars and button groups. CSS Grid is two-dimensional, use it for page layouts and anything with rows and columns together. And use them together: Grid for structure, Flexbox for aligning content inside it.
Every component in my library uses this combination. Browse them to see the patterns applied.
Frequently asked questions
What is the difference between Flexbox and Grid?+
Flexbox is one-dimensional: it arranges items along a single axis, a row or a column. CSS Grid is two-dimensional: it controls rows and columns at the same time. Use Flexbox for content flowing in one direction and Grid for overall layout structure.
When should I use Flexbox instead of Grid?+
Use Flexbox when items sit in a single line and you care about spacing and alignment along that line, like a navbar, toolbar, button group, or centering an element. If you can describe it as 'a row of things' or 'a column of things', Flexbox is the right choice.
When should I use CSS Grid instead of Flexbox?+
Use CSS Grid when placing items into a two-dimensional structure with rows and columns together, such as a page layout, an image gallery, or a dashboard, or when you want the layout to drive sizing rather than the content.
Can I use Flexbox and Grid together?+
Yes, and it's the most common approach. Use Grid for the overall page or card layout, then use Flexbox inside individual cells or cards to align and space their content. Grid handles the big picture; Flexbox handles the details.
Is Grid replacing Flexbox?+
No. They solve differently shaped problems, one-dimensional versus two-dimensional layout, and both remain essential. Choosing the right one for a given layout simply makes your CSS simpler and more predictable.
I build fast, SEO-ready sites and rank them on Google and AI search.