Stop reaching for Flexbox every time

Flexbox is one-dimensional. Grid is two-dimensional. Most layouts are two-dimensional.

The layout that changed my mind

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

Sidebar, header, content — three lines. No wrappers, no nesting, no math.

When to use each

• Flexbox: One axis, dynamic content, component internals
• Grid: Page layout, card grids, anything two-dimensional

Grid areas are readable

grid-template-areas:
  "header header"
  "sidebar main";

You can literally see the layout in the CSS.