Flexbox vs Grid: which to use, and when
Flexbox or CSS Grid? Learn the one-dimensional vs two-dimensional rule, see both build the same layout, and get a quick way to pick the right one.
Use Flexbox when you are laying things out in a single row or column, and Grid when you need rows and columns together. Flexbox lets the content decide the sizes. Grid lets you define the layout first and place content into it. You will often use both on the same page, and they work well nested.
Beginners treat this as a rivalry, and it is not. Flexbox and Grid solve different layout problems, and picking the right one mostly comes down to a single question. This guide gives you that question, shows both tools building the same layout, and ends with a checklist for the cases that feel ambiguous.
The one rule: one dimension or two
Flexbox is one-dimensional. It arranges items along one axis, a row or a column, and you control spacing and alignment along that line. Items can wrap onto a new line, but each line is laid out independently of the others.
Grid is two-dimensional. You define rows and columns, and items line up on both at once. A cell in row two always sits directly under the cell in row one.
That difference explains nearly everything else. If you only care about the order of items along a line, Flexbox is enough. If you care about how items line up across both directions, you want Grid.
Content-first vs layout-first
A second way to think about it is who is in charge.
With Flexbox, the content drives the layout. Items take the space they need, and you tell the container how to distribute what is left. That is why Flexbox suits things whose size you cannot predict, like navigation links or buttons with different labels.
With Grid, the layout drives the content. You decide on three equal columns first, then drop items in. The grid does not care how long each item's text is. That is why Grid suits page structure and card galleries.
The same layout, built both ways
Here is a row of cards, the kind you see on every pricing or blog page. First with Flexbox:
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 15rem;
}Each card wants to be at least 15rem wide and grows to share the leftover space. When the row runs out of room, cards wrap. The catch shows up on the last row. If it has two cards instead of three, those two stretch wider to fill the space, because each row is laid out on its own. The Responsive Wrapping (opens in a new tab) lesson walks through this behavior.
Now the same cards with Grid:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}The columns are defined once for the whole container, so every card keeps the same width, including the ones on the last row. There is no .card rule at all. The Responsive Grid (opens in a new tab) lesson builds this exact pattern, and Fr And Repeat (opens in a new tab) explains what fr and repeat are doing.
For a gallery or card layout, Grid is the better fit. Notice, though, that Flexbox did not fail. It produced a working layout, and the only difference was the last row.
Where Flexbox is the better fit
Reach for Flexbox when the layout is a line of things:
- A navbar, with a logo on one side and links on the other, using
justify-content: space-between. The The Navbar (opens in a new tab) lesson builds one. - A row of buttons or tags that should sit together and wrap if they have to.
- Centering one item inside a container. Our guide to centering a div shows why
display: flexwith two properties is the default answer. - Spacing inside a component, like an icon next to a label, using
gapandalign-items. - Equal-height columns of content that should size themselves, using the Flex Grow (opens in a new tab) pattern.
The common thread is that the number and size of items can change, and you want the container to cope. If Flexbox is new to you, start with What Is Flexbox (opens in a new tab).
Where Grid is the better fit
Reach for Grid when you can sketch the layout as a table of rows and columns:
- A full page layout, with a header, sidebar, main area and footer. Named
grid-template-areasmake this readable, and the Page Layout With Grid Areas (opens in a new tab) lesson shows how. - A card or image gallery where everything should line up in columns.
- A dashboard, where some tiles span two columns or rows. The Spanning Items (opens in a new tab) lesson covers
grid-column: span 2. - A form with labels in one column and inputs in the other.
The common thread is alignment across both axes. Start with What Is Grid (opens in a new tab) if you have not used it before.
Using them together
Real pages mix the two, and nesting is normal. A typical pattern is Grid for the page, then Flexbox inside each piece:
.page {
display: grid;
grid-template-columns: 16rem 1fr;
min-height: 100vh;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}The page has two columns, a sidebar and a main area, which is a two-dimensional problem. The header inside it is a single row of items, which is a one-dimensional problem. Each tool does the part it is good at. The Grid Vs Flex (opens in a new tab) lesson compares them with more examples, and the Containing The Grid (opens in a new tab) lesson shows how to keep a grid from overflowing its parent.
Both tools also build on the box model, so if gaps and padding behave oddly, our CSS box model guide is the place to check.
Quick comparison
| Flexbox | Grid | |
|---|---|---|
| Dimensions | One (row or column) | Two (rows and columns) |
| Who decides sizes | The content | The layout |
| Best for | Navbars, buttons, small components | Page layouts, galleries, dashboards |
| Wrapping | Each line sized independently | Every item locked to the same tracks |
| Overlapping and spanning | Awkward | Built in |
| Centering one item | justify-content and align-items | place-items: center |
Which one should you reach for?
- Is it one row or one column of things? Use Flexbox.
- Do items need to line up in both directions? Use Grid.
- Will item sizes vary a lot? Use Flexbox and let the content decide.
- Do you want identical column widths, including on the last row? Use Grid.
- Still unsure? Try Flexbox first. It covers most small layouts, and switching to Grid later is a few lines.
If you use Tailwind, nothing changes. flex and grid are the same two tools with shorter names, which is one more reason to learn the CSS first. Our Tailwind CSS vs CSS article explains why.
Frequently asked questions
Is Grid replacing Flexbox?
No. They are designed to work together, and most production sites use both. Grid handles page structure, and Flexbox handles the alignment inside each piece.
Should beginners learn Flexbox or Grid first?
Flexbox first. It is simpler, you will use it constantly, and it teaches the ideas of axes and alignment that Grid builds on.
Is Grid harder than Flexbox?
Grid has more properties, so it feels bigger at first. The core is small, though: display: grid, grid-template-columns and gap are enough for most layouts.
Can I put Flexbox inside Grid?
Yes. Any grid item can be a flex container, and any flex item can be a grid container. Nesting them is common.
Where to go from here
Remember the one question: is this layout a line, or a table? A line is Flexbox, and a table is Grid. Practice is the fastest way to make that automatic. CSS Basics (opens in a new tab) builds a page with both, one lesson at a time, and Tailwind CSS Basics (opens in a new tab) teaches the same layouts as utility classes.
