Esc
↑↓ navigate   Enter open   Esc close

CSS layout comparison

CSS Grid vs Flexbox

The two modern CSS layout systems every front-end developer uses daily. They solve overlapping problems, which creates confusion about when to reach for each one — and the answer is usually "both, but for different levels of the layout."

TL;DR

  • Flexbox is one-dimensional. It arranges items in a row or a column. Great for navigation bars, button groups, centering, and any component-level alignment.
  • CSS Grid is two-dimensional. It controls rows and columns at the same time. Great for page layouts, card grids, and any design where items need to align on both axes.
  • Use both. Grid for the overall layout; Flexbox inside the cells. They are designed to complement each other.

Side-by-side comparison

AspectCSS GridFlexbox
DimensionsTwo-dimensional (rows AND columns)One-dimensional (row OR column)
PlacementItems can be placed in named areas or by line numbersItems flow along a single axis; wrapping allowed
Use casePage layout, image galleries, data tablesNavigation, button groups, centering, card internals
AlignmentAlign items on both axes simultaneouslyAlign items on main axis and cross axis separately
Sizing unitfr unit — fractions of available spaceflex-grow / flex-shrink / flex-basis
Browser supportAll modern browsers (since 2017)Slightly broader (IE 11 with prefixes)
Learning curveSteeper — two axes, named areas, fr unitGentler — one axis, intuitive properties
Responsive designrepeat(auto-fit, minmax()) for fluid gridsflex-wrap: wrap for wrapping rows

Code side-by-side

A classic page layout (header, sidebar, content, footer):

CSS Grid (page layout)

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}
header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: content; }
footer  { grid-area: footer; }

Flexbox (navbar items)

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  gap: 0.5rem;
}
.navbar-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
/* Centre a single element: */
.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

When to use CSS Grid

  • Page-level layout. Headers, sidebars, main content areas, and footers all align on both axes — Grid handles this in a few lines with grid-template-areas.
  • Card grids and galleries. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) creates a fluid, responsive grid with no media queries.
  • Overlapping elements. Grid items can share cells; Flexbox cannot overlap items without absolute positioning.
  • Alignment across multiple rows. If items in different rows need to align with each other, only Grid can do this reliably.

When to use Flexbox

  • Navigation bars. Logo on the left, links in the middle, CTA on the right — justify-content: space-between handles this perfectly.
  • Centring a single element. The classic display: flex; align-items: center; justify-content: center is the simplest vertical-and-horizontal centring solution.
  • Button groups and toolbars. Items naturally size to content and flow in a row; Flexbox keeps them aligned without manual sizing.
  • Inside Grid cells. Use Flexbox to arrange the contents of a grid area — the two work perfectly together.

English phrases engineers use

CSS Grid conversations

  • "I used named grid areas so the markup reads like a wireframe."
  • "The columns are set to repeat(auto-fit, minmax(200px, 1fr)) — fully responsive."
  • "That element needs to span two columns: grid-column: span 2."
  • "Grid gives us two-dimensional alignment — rows and columns at once."
  • "Use gap instead of margins — it's gap-aware."

Flexbox conversations

  • "Just flex the container and set align-items: center."
  • "The items shrink to fit because flex-shrink defaults to 1."
  • "Add flex: 1 to the main content so it fills the remaining space."
  • "Set flex-wrap: wrap so items break onto the next row on mobile."
  • "The main axis is horizontal here — use justify-content to space items."

Quick decision tree

  • Overall page structure (header, sidebar, footer) → CSS Grid
  • Navigation bar, toolbar, button group → Flexbox
  • Responsive card grid / image gallery → CSS Grid
  • Centre one element (vertically + horizontally) → Flexbox
  • Items that must align across rows → CSS Grid
  • Simple single-row / single-column layout → Flexbox
  • Inside a grid cell to arrange its contents → Flexbox inside Grid

Frequently asked questions

What is the core difference between CSS Grid and Flexbox?

Flexbox is one-dimensional — it lays out items along a single axis (either a row or a column). CSS Grid is two-dimensional — it controls both rows and columns simultaneously. A good rule of thumb: use Flexbox for components, use Grid for page-level layouts.

Can I use CSS Grid and Flexbox together?

Absolutely — and you should. A common pattern is to use Grid for the overall page layout (header, sidebar, main, footer) and Flexbox inside each section to align the items within it. They are complementary, not competing.

Which has better browser support?

Both have excellent browser support in all modern browsers (Chrome, Firefox, Safari, Edge). Flexbox has slightly broader legacy support (including older IE 11 with prefixes). CSS Grid has full support in browsers released since 2017. For any project targeting modern browsers, both are safe to use.

Related comparisons & resources