Flexbox and Grid overlap: both can put three boxes in a row. The question is not which is better, but which one makes a particular layout simpler and more robust. Most real pages use both.
The core difference
| Flexbox | Grid | |
|---|---|---|
| Dimensions | One at a time: a row or a column | Two at once: rows and columns |
| Sizing starts from | The items and their content | The container's track definition |
| Wrapping | Each line is independent | Items stay aligned to columns |
| Typical scale | Components | Page layouts and repeated items |
A useful way to remember it:
- Flexbox is content-out. You put items in a line and let their content influence how much space each gets.
- Grid is layout-in. You define the structure first, then place items into it.
When Flexbox fits better
Choose Flexbox when items should size themselves by their content and simply line up.
Navigation bars
.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
}Each link is as wide as its label. You do not want equal columns here.
A header with items at both ends
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}Button groups and toolbars
.actions {
display: flex;
gap: 0.5rem;
}
.actions .push-end {
margin-inline-start: auto;
}A form field with an attached button
<form class="search" role="search">
<label class="visually-hidden" for="q">Search</label>
<input id="q" type="search" name="q">
<button type="submit">Search</button>
</form>.search {
display: flex;
}
.search input {
flex: 1;
min-width: 0;
}The input takes all the space the button does not need, whatever the button's label is in any language.
Tags and chips
A wrapping flex row of tags packs them tightly, with each tag at its natural width. A grid would force them into columns, leaving uneven gaps.
When Grid fits better
Choose Grid when you want items to line up in both directions, or when the layout should be defined independently of the content.
Card galleries
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
}Every card in every row has the same width, including the last row. With wrapped Flexbox, a lone card on the last row would stretch across the whole width.
Page layouts
.page {
display: grid;
grid-template-columns: 15rem 1fr;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}The structure is clear from the CSS, and items can span rows and columns.
Forms with aligned labels
.form-grid {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.75rem 1rem;
align-items: center;
}Every label sits in the first column, sized to the longest label, and every input lines up in the second. Flexbox cannot align items across separate rows like this.
Overlapping elements
Grid items can share a cell, which makes layering simple without absolute positioning:
.hero {
display: grid;
}
.hero > * {
grid-area: 1 / 1; /* every child in the same cell */
}
.hero-text {
align-self: end;
padding: 2rem;
}The image and the text sit on top of each other, and the container's height adapts to whichever is taller.
A quick decision guide
Ask these questions in order:
- Do items need to line up in both rows and columns? Use Grid.
- Should the layout be defined before the content, with fixed regions? Use Grid.
- Should each item take the size its content needs, in one line? Use Flexbox.
- Is it a small group of controls or links? Use Flexbox.
- Still unsure? Try the one that needs less code. If you find yourself fighting it with fixed widths and negative margins, try the other.
There is no performance reason to prefer one over the other for typical layouts. Choose by which one describes your design most simply.
Combining both
Layouts nest. A grid item can be a flex container, and a flex item can be a grid container. A typical page:
<body class="page">
<header class="site-header">
<a class="logo" href="/">Corner Bakery</a>
<nav class="site-nav">...</nav>
</header>
<main class="page-main">
<ul class="cards">
<li class="card">
<h2>Sourdough</h2>
<p>Slow-fermented for 24 hours.</p>
<div class="card-actions">
<span class="price">£4.20</span>
<a href="/order">Order</a>
</div>
</li>
</ul>
</main>
<footer>...</footer>
</body>/* Grid: overall page structure */
.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
/* Flexbox: header contents in a line */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}
/* Grid: cards aligned in columns */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
padding: 0;
list-style: none;
}
/* Flexbox: card content in a column, actions pushed to the bottom */
.card {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}The margin-top: auto on .card-actions pushes the price and link to the bottom of every card, so they line up across a row even when the descriptions have different lengths. For aligning every part of the cards across a row, such as headings and descriptions too, Grid's subgrid is the tool. It has its own lesson later.
Before writing any layout code, sketch the design and draw boxes around each group. For each box, ask "one direction or two?" That usually answers the Flexbox or Grid question in seconds.
What about floats and tables?
Floats were designed for wrapping text around images, and that is still their only good use today. Using them for page columns is an outdated technique. HTML tables are for tabular data, never for layout. Flexbox and Grid replace both for layout work.
Summary
- Flexbox lays out items in one direction and sizes them from their content.
- Grid defines rows and columns first and keeps items aligned in both directions.
- Use Flexbox for navigation, toolbars, button groups, input-and-button pairs and tags.
- Use Grid for page structure, card galleries, aligned forms and overlapping layers.
- Nest them freely: Grid for the structure, Flexbox inside the components.