A baseline grid is the invisible lattice that keeps all whitespace in sync. When every vertical measure is either the height of one line or a clean multiple of it, a page feels balanced and intentional. Adding images to the mix is where things get tricky. By default they are whatever height their aspect ratio makes them, and because of that, they can never align to the grid and push everything after them out of rhythm. Until recently, the only fix was JavaScript, which always felt clunky for what is really a layout problem. That is finally changing: with container queries, advanced attr() and round(), you can now snap images to the grid with pure CSS.
I know, none of this is essential. Baseline grids are a niche kind of craft, and whether the images snap to the grid is something almost no reader will consciously register. But this is the kind of thing I care about. And especially in more complex multi-column layouts, the misalignment of images can be a real thorn in the side of the design, so I am excited to have a clean CSS solution for it at last.
Rhythm from line-height and whitespace
Aligning elements to the baseline grid starts with line-height. A global line-height on the html element makes every line of copy one line box tall. Everything else stays on that beat when your vertical whitespace uses the same unit: one line, or a multiple of it. The convenient unit is rlh, the root line height. Treated as a variable, it becomes a single control for every vertical measure on the page. When you change the root line height, the whole rhythm rescales with it.
