Flexbox and Grid

Before Flexbox and Grid, lining up boxes in CSS meant floats, inline-block hacks, and table layouts abused for their alignment behavior. Centering something vertically was a running joke. Flexbox (2015) and Grid (2017) fixed this properly: two purpose-built layout systems that handle alignment, spacing, and responsiveness without a single hack.

This guide assumes you know the box model and position from CSS Without Tears. It builds the layouts you'll actually use: navbars, card rows, dashboards, photo galleries, and the classic "holy grail" page layout.

The phases

1. Flexbox: One-Dimensional Layout - display: flex, the main axis and cross axis, justify-content/align-items, wrapping, and growing/shrinking items. Builds a navbar and a row of equal-width cards.
2. CSS Grid: Two-Dimensional Layout - display: grid, defining columns and rows, grid-template-areas, and spanning cells. Builds a dashboard layout and a responsive photo gallery.
3. Choosing Between Them (and Combining Them) - the one-dimension-vs-two-dimension rule of thumb, and a holy grail layout that uses both together.

By the end you'll reach for the right tool instead of fighting the wrong one.