What is CSS Grid, and how does it differ from Flexbox?

Question

Accepted Answer

CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. It excels at creating complex page layouts.

To use Grid, set display: grid on a container and define the grid structure with grid-template-columns and grid-template-rows:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

The fr unit represents a fraction of available space. In the example, the middle column takes twice the space of the side columns.

You can place items explicitly using grid-column and grid-row, or let the auto-placement algorithm handle it. Named grid areas make layouts readable:

grid-template-areas:
  "header header header"
  "sidebar main aside"
  "footer footer footer";

The difference from Flexbox is dimensional. Flexbox works in one dimension. Items flow in a row or column, and you control alignment within that line. Grid works in two dimensions. You define a grid structure and place items into cells.

Use Grid for page layouts, card grids with consistent sizing, and any layout requiring alignment in both directions. Use Flexbox for navigation bars, centering content, and single-axis distribution.

They work well together. A Grid layout might contain Flexbox components. A card grid uses Grid for the overall layout and Flexbox to align content within each card.