Layout: Flexbox and Grid

The two modern tools for laying out elements: Flexbox for lines, Grid for 2D grids.

Foundation 35 minutes Prerequisites: CSS Fundamentals

Flexbox vs Grid

Flexbox: one dimension (row or column). Great for nav bars, button groups, alignments.
Grid: two dimensions (rows + columns). Great for page layouts, dashboards, galleries.

.nav { display: flex; gap: 12px; align-items: center; }
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }

Use Grid when you need control on TWO axes, Flexbox when ONE is enough.