CSS Grid vs Flexbox: When to Use Which

The Core Difference

Flexbox is one-dimensional. It arranges items along a single axis — either a row or a column. Items flow in one direction and the layout is driven by the content size.

CSS Grid is two-dimensional. It defines both rows and columns simultaneously. You can place items precisely at any intersection of your defined tracks, independent of content size.

/* Flexbox: items flow along one axis */
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Grid: rows AND columns defined together */
.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr auto;
  min-height: 100vh;
}

When to Use Flexbox

Flexbox is the right choice whenever you are working with a single row or column of items and the content drives the sizing:

• Navigation bars — a row of links where some flex-grow to fill space
• Button groups and toolbars — items spaced with gap in a single row
• Card content internals — title, description, and footer button stacked in a column
• Centring a single element — the classic justify-content: center; align-items: center pattern
• Wrapping tag clouds or chip lists — items that wrap naturally onto multiple lines
• Responsive card rows — flex-wrap: wrap with flex: 1 1 280px on items

/* Navigation bar — classic Flexbox use case */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* Responsive card row that wraps */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 280px; /* grow, shrink, min-width */
}

When to Use CSS Grid

Grid is the right choice whenever you need control over both rows and columns simultaneously:

• Full page layouts — sidebar + content + header + footer defined in one place
• Explicit multi-column card grids — 3-column layouts that snap at breakpoints
• Dashboard layouts — widgets that span multiple columns and rows
• Magazine-style layouts — feature article spanning two columns next to smaller items
• Form layouts — labels and inputs aligned across multiple rows

/* Two-column page layout */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2; }
.content { grid-column: 2; grid-row: 2; }

/* Auto-fill card grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

Combining Grid and Flexbox

The most powerful approach is using both together. Grid defines the macro layout (the overall page structure) and Flexbox handles micro layout (the internals of each component).

/* Grid handles the page structure */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}

/* Flexbox handles the navbar internals */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Flexbox handles the card internals */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* pushes to bottom */
}

Real-World Layout Patterns

Browser Support

Both Flexbox and CSS Grid have universal browser support in all modern browsers. No vendor prefixes are required. The newer Grid features like subgrid have good support (Chrome 117+, Firefox 71+, Safari 16+) but older Grid syntax is safe everywhere.

Build Layouts with CSSTools.io

Both layout tools are available on CSSTools.io so you can experiment visually without writing code first.