Why Grid: 2D layout vs flex's 1D

Flex handles ONE axis at a time

Flex is for "items in a row" or "items in a column." The PERPENDICULAR axis is whatever the items decide (their content + cross-axis align).

.row { display: flex; gap: 16px; }      /* row of items; each gets its own height */

If you want 4 items in a 2x2 grid where every cell is exactly the same size: flex makes you do nested flexes or row-wrap with manual sizing. Awkward.

Grid handles BOTH axes

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 2 equal columns */
  grid-template-rows: auto auto;      /* 2 rows, sized by content */
  gap: 16px;
}

Every cell is a precise box. Items can SPAN multiple rows or columns. The grid stays rectangular no matter what content each cell has.

When to use each

Rule of thumb: if you'd want to draw the layout as a 2D wireframe, use grid. If you'd just list items in a row or column, use flex.

They compose

A grid CELL can contain a flex layout — .dashboard is grid, each panel inside is flex. Use the right tool at each level.