Grid

CSS Grid handles two-dimensional layout with explicit rows, columns, named areas, and auto-placement. Tracks can be fixed, flexible (`fr`), or intrinsic (`minmax`, `fit-content`).

					.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}
				

`auto-fit` collapses empty tracks; `auto-fill` keeps them. Grid is excellent for component internals (forms, dashboards) — not only full-page shells.

On interviews: compare Grid with Flexbox, explain track sizing, and build a responsive card grid without many breakpoints.

The trade-off is explicit track control versus intrinsic adaptability from minmax and fr units.

Common pitfalls: only pixel tracks destroy intrinsic responsiveness; ignoring `minmax(0, 1fr)` when content overflows tracks.

Checklist:

• Use Grid when both axes matter.
• Prefer intrinsic track sizing with minmax.
• Name areas when layout regions are stable.
• Let auto-placement reduce boilerplate.