What is the difference between CSS Grid and Flexbox?

Short answer

Flexbox is a one-dimensional layout system for rows or columns. CSS Grid is a two-dimensional system for rows and columns simultaneously.

Key differences

• Dimensionality: Flexbox handles single-axis distribution; Grid handles both axes together.
• Content vs. layout: Flexbox is content-first; item sizes often depend on content. Grid is layout-first; you define tracks and place items into them.
• Alignment: Both offer powerful alignment, but Grid allows precise placement via line numbers, named areas, and spanning.

When to use each

• Use Flexbox for navbars, button groups, card footers, and centering single rows or columns.
• Use Grid for overall page layouts, dashboards, galleries, and any design that requires simultaneous row and column control.

Example

/* Flexbox row */
.navbar {
  display: flex;
  justify-content: space-between;
}

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

Tips

• The two systems work well together. For example, use Grid for the page skeleton and Flexbox for aligning items inside a grid cell.