Side by side
CSS GridvsFlexbox
What is the difference between CSS Grid and Flexbox?
Updated 2 min read6 differences
In short
CSS Grid places items in rows and columns at once, in two dimensions, while Flexbox lines them up along one row or column, ideal inside components.
CSS Grid
CSS Grid is a two-dimensional CSS layout system that arranges elements into rows and columns at the same time, making complex page layouts simple to build.
Read the page on CSS GridFlexbox
CSS Flexible Box Layout
Flexbox is a CSS layout model that arranges items in a single row or column and controls how they grow, shrink, align, and share the available space.
Read the page on FlexboxCSS Grid and Flexbox compared
| Aspect | CSS Grid | Flexbox |
|---|---|---|
| Dimensions | Two: rows and columns at the same time | One: a single row or a single column |
| Approach | Layout-first: define tracks, then place items | Content-first: items size themselves, space is shared |
| Alignment across rows | Items line up in both rows and columns | Each wrapped line is aligned independently |
| Key properties | grid-template-columns, grid-template-areas, grid-column | flex-direction, flex-wrap, flex-grow, flex-basis |
| Placement | Items can span or overlap specific cells | Items follow one another along the line |
| Best for | Page layouts, galleries, dashboards and card grids | Navigation bars, toolbars, button groups and centering |
The difference, explained
CSS Grid and Flexbox are both CSS layout systems, switched on with display: grid and display: flex. Grid divides a container into rows and columns and places items into the resulting cells. Flexbox arranges items in a single line, horizontally or vertically, and controls how they grow, shrink and align.
The key difference is two dimensions versus one. Grid is layout-first: you define the tracks, such as grid-template-columns: 1fr 2fr, and items line up in both directions. Flexbox is content-first: items size themselves and the container shares out the leftover space along one axis.
They are designed to be combined. A typical page uses Grid for the overall structure (header, sidebar, main content) and Flexbox inside components, such as a navigation bar or a row of buttons. Both share the same alignment properties, like justify-content, align-items and gap.
A common misconception is that Grid replaced Flexbox. Flexbox can wrap onto several lines, but each line is laid out on its own, so items in different rows do not line up as columns; when you need that alignment, Grid is the right tool, and when you don't, Flexbox is often simpler.
Which one should you use?
Choose CSS Grid when…
- Items must align in both rows and columns.
- You are building the overall page structure.
- The layout is defined first and content fills it.
- Items should span or overlap specific areas.
Choose Flexbox when…
- Items sit in a single row or column.
- Item sizes should adapt to their content.
- You need to space out or center a few elements.
A gallery with Grid and a navbar with Flexbox
/* Grid: three equal columns, rows added as needed */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gallery .featured {
grid-column: span 2; /* take two columns */
}/* Flexbox: one row with space between items */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.navbar .search {
flex-grow: 1; /* take the leftover space */
}Readers ask
Should I use Grid or Flexbox?
Use Grid when you need to control rows and columns together, and Flexbox when items flow in one direction. Most real layouts use both: Grid for structure and Flexbox inside components.
Is CSS Grid harder to learn than Flexbox?
Grid has more properties, but the basics, display: grid and grid-template-columns, are quick to learn. Many developers start with Flexbox because it has fewer concepts.
Can you use Flexbox inside a Grid?
Yes. Any grid item can itself be a flex container, and the reverse works too, which is the most common way the two are combined.