Flexbox and Grid

The two CSS layout systems that replaced floats and hacks: Flexbox for rows and columns, Grid for full two-dimensional layouts, and how to pick between them.

1. Flexbox: One-Dimensional Layout How display: flex lines up boxes along a single axis, with justify-content, align-items, wrapping, and flex-grow/shrink/basis for building a navbar and a row of equal-width cards.
2. CSS Grid: Two-Dimensional Layout How display: grid lays out rows and columns together, using grid-template-columns/rows, gap, named grid-template-areas, and spanning, to build a dashboard layout and a responsive photo gallery.
3. Choosing Between Them (and Combining Them) The rule of thumb for Flexbox vs Grid, why they compose rather than compete, and a holy grail layout that uses both together.