CSS Layout: Flexbox & Grid

Layout stops being guesswork once you know which system owns which decision. We rebuild four common page shapes twice — once in Flexbox, once in Grid — so you can feel where each one is the honest choice.

The route

1. Which system owns which decision

   Content-driven versus container-driven layout, and the one question that picks between them.

   You board here
   30 min
2. Flexbox properly

   Main and cross axis, grow/shrink/basis, and why `margin-left: auto` solves so much.

   30 min
3. Grid properly

   Tracks, minmax, auto-fit and named areas, and how to stop fighting implicit rows.

   30 min
4. Four page shapes, twice

   Sidebar, holy grail, card row and media object — built in both, so you feel the difference.

   35 min

A look at the teaching

/* Flexbox: the content decides. Items size themselves,
   the container distributes what is left over. */
.toolbar { display: flex; gap: 8px; }
.toolbar .spacer { margin-left: auto; }

/* Grid: the container decides. The tracks exist whether
   or not anything is in them. */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
}

Who is driving