CSS Grid vs Flexbox: When to Use Which (With Layout Examples)

Both Grid and Flexbox are modern CSS layout systems, and they overlap enough to be confusing. The simplest way to choose is to ask whether you're arranging things along one line or across rows and columns at the same time.

The core difference

• Flexbox is one-dimensional: it lays items out in a single row or column, and content decides sizing.
• Grid is two-dimensional: you define rows and columns, and place items into the cells.
• Flexbox is content-first (items size themselves); Grid is layout-first (the tracks are defined, then items fill them).

Use Flexbox for

• Navigation bars and toolbars.
• Centering a single element.
• A row of buttons or tags that should wrap naturally.
• Distributing space among a few items along one axis.

Use Grid for

• Full page layouts with header, sidebar, content, and footer.
• Card galleries and dashboards where items align in rows and columns.
• Anything where you want to control both axes or overlap items.

A responsive card grid without media queries

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

This creates as many columns as fit, each at least 240px wide and sharing leftover space equally. The layout reflows from one column on phones to several on desktops without a single media query.

Named areas for page layouts

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }