What is the difference between Flexbox and Grid?

CSS

The short answer

Flexbox is one-dimensional — it handles layout in a single direction (row or column). Grid is two-dimensional — it handles rows and columns at the same time. Use Flexbox for aligning items in a line (navbars, buttons, card content). Use Grid for page layouts and anything that needs alignment in both directions.

Flexbox — one direction at a time

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Flexbox works along one axis. You choose the direction with flex-direction (row or column), and items flow along that axis. It is great for distributing space between items in a row or column.

Best for:

  • Navigation bars
  • Button groups
  • Centering a single element
  • Card content layout (icon + text + button in a row)
  • When you do not know how many items there will be

Grid — two directions at once

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

Grid lets you define rows and columns together. Items can span multiple rows and columns. It is great for complex layouts where you need precise control over both dimensions.

Best for:

  • Page layouts (header, sidebar, main, footer)
  • Card grids with equal sizing
  • Dashboard layouts
  • Any layout where items need to align in both rows and columns

Side by side comparison

/* Flexbox — items in a row */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Grid — items in a grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

They work together

You do not have to choose one. Most layouts use both:

/* Grid for the page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
}
/* Flexbox for the navigation inside the sidebar */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Flexbox for the header content */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid defines the overall structure, Flexbox handles alignment within individual sections.

Quick decision guide

  • "Should these items line up in a row or column?" → Flexbox
  • "Should these items line up in a grid with rows AND columns?" → Grid
  • "I need a full page layout" → Grid
  • "I need to center something" → Flexbox (or Grid, both work)

Interview Tip

The key distinction is: Flexbox is one-dimensional, Grid is two-dimensional. Show a practical example of each and explain that they complement each other — Grid for page layout, Flexbox for component-level alignment. Saying "I use both together" is better than picking a side.

Why interviewers ask this

This is one of the most common CSS questions. Interviewers want to see if you know when to use each one and if you understand the fundamental difference. A candidate who says "Flexbox for rows, Grid for layouts, and I use both together" shows a solid understanding of modern CSS layout.

Table of Contents