CSS Grid

What you'll learn

• Tracks, lines, areas — the vocabulary that unlocks every property
• fr units, repeat, minmax in real layouts
• Implicit vs explicit grids
• Subgrid, and when it's the right answer
• Auto-fit / auto-fill for responsive layouts
• Choosing between grid and flexbox in practice

1. 01
   Why grid exists

   What two-dimensional layout actually means in CSS.
   9 min
2. 02
   Tracks, lines, and cells

   The vocabulary you need before any other property makes sense.
   12 min
3. 03
   grid-template-columns

   fr units, repeat, minmax — the everyday tools.
   14 min
4. 04
   Placement by line

   grid-column / grid-row and where the implicit grid takes over.
   13 min
5. 05
   Named areas

   Layout you can read aloud. Useful, with limits.
   11 min
6. 06
   Auto-fit and auto-fill

   Responsive grids without media queries.
   13 min
7. 07
   Subgrid

   Aligning across nested grids — finally portable.
   12 min
8. 08
   Alignment, gap, and order

   The properties grid shares with flexbox, and the ones it doesn't.
   13 min
9. 09
   Grid vs flex, in practice

   A decision tree from real designs.
   13 min