CSS Flexbox vs Grid: When to Use Each (with Examples)

Flexbox vs Grid: The Quick Answer

Flexbox is for one-dimensional layouts - arranging items in a single row or column. Grid is for two-dimensional layouts - arranging items in rows AND columns simultaneously.

If you are laying out items in a line, use Flexbox. If you are creating a page layout with areas, use Grid. Many real-world layouts use both.

Flexbox Basics

.container {
  display: flex;
  flex-direction: row;      /* row | column */
  justify-content: center;  /* main axis alignment */
  align-items: center;      /* cross axis alignment */
  gap: 16px;                /* space between items */
}

Main Axis vs Cross Axis

• When flex-direction: row, the main axis is horizontal and cross axis is vertical
• When flex-direction: column, the main axis is vertical and cross axis is horizontal

justify-content (Main Axis)

• flex-start: items at the start
• flex-end: items at the end
• center: items centered
• space-between: equal space between items, no space at edges
• space-around: equal space around each item
• space-evenly: truly equal spacing everywhere

align-items (Cross Axis)

• stretch: items fill the container (default)
• flex-start: items at the top
• flex-end: items at the bottom
• center: items vertically centered
• baseline: items aligned by their text baseline

Use our Flexbox Generator to experiment visually and copy the CSS.

Common Flexbox Patterns

Centering anything

.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
}

Navigation bar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

Card row that wraps

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* grow, shrink, minimum width */
}

Sticky footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* grows to fill available space */
}

Grid Basics

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* three columns */
  grid-template-rows: auto 1fr auto;    /* three rows */
  gap: 16px;
}

The fr Unit

fr stands for "fraction of available space." 1fr 2fr 1fr means the middle column gets twice the width of the side columns.

Grid Template Areas

The most readable way to create page layouts:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Use our Grid Generator to build and export Grid layouts visually.

Common Grid Patterns

Responsive card grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

This automatically creates as many columns as fit, each at least 280px wide.

Dashboard layout

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

Spanning items

.featured {
  grid-column: span 2; /* takes two columns */
  grid-row: span 2;    /* takes two rows */
}

When to Use Flexbox

• Navigation bars and menus
• Centering content
• Distributing space between items
• Single-row or single-column layouts
• When items should determine their own size
• Icon + text alignment
• Form field groups

When to Use Grid

• Page-level layouts
• Card grids with equal sizing
• Complex layouts with overlapping items
• When you need precise row AND column control
• Image galleries
• Dashboard layouts
• When the layout should determine item size

Combining Both

Most real-world sites use Grid for the page layout and Flexbox for components within it:

/* Grid for page structure */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
}

/* Flexbox for the header inside the page */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Quick Reference Table

Tools to Help

• CSS Flexbox Generator - visual Flexbox playground
• CSS Grid Generator - visual Grid layout builder
• px to rem Converter - convert units for responsive design
• CSS Box Shadow Generator - style your layout elements
• Gradient Generator - create CSS gradients for backgrounds