By 2019, both CSS Grid and Flexbox are supported in all modern browsers and there is no excuse for using floats or table-based layouts. But many developers still reach for Flexbox out of habit when Grid would serve better, or struggle to understand the conceptual divide between the two. Here’s the definitive guide.
The Core Distinction
- Flexbox is one-dimensional: it lays items out in a row or a column.
- CSS Grid is two-dimensional: it lays items out in rows and columns simultaneously.
This is not about which is “better” — they solve different problems, and the best layouts often use both together.
Flexbox: Use It For
Navigation bars, card rows, button groups, and anything where you want items to distribute themselves along a single axis:
.nav {
display: flex;
justify-content: space-between; /* distribute along main axis */
align-items: center; /* centre on cross axis */
gap: 1rem;
}
.card-row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card { flex: 1 1 280px; } /* grow, shrink, ideal width */CSS Grid: Use It For
Full-page layouts, card grids with precise column control, magazine-style layouts, and any case where you need control over both axes:
.page-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}Auto-Fill vs Auto-Fit
auto-fill creates as many columns as will fit, even if some are empty. auto-fit collapses empty columns so filled columns stretch to fill the space. For responsive card grids, auto-fill with minmax() is almost always what you want.
Using Both Together
Use Grid to define the macro layout (header, sidebar, content, footer), then use Flexbox inside each region to align its contents. They were designed to complement each other.
Browser Support in 2019
CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge). IE 11 has partial support via the old -ms-grid spec — if IE 11 support is required, use a simpler Grid layout or fall back to Flexbox for that case.
The developers who truly understand Grid and Flexbox produce cleaner, more resilient CSS with half the code. Invest the time to master both and your layouts will be faster to write and easier to maintain.
