While column grids govern horizontal layout, baseline grids govern vertical alignment:
A baseline grid consists of horizontal lines repeating at fixed increments (standardly 4px or 8px):
All typography lines, heading margins, button heights, and image boxes must snap to a baseline grid line.
UX Outcome: Eliminates awkward vertical misalignments. When multi-column articles share a common baseline grid, lines of text across adjacent columns align horizontally, creating Swiss-style typographic harmony.
Topics
Anatomy of a Grid: Columns, Gutters, and Margins
The Universal 12-Column Responsive Grid System
Fluid vs. Fixed vs. Adaptive Grid Implementations
Baseline Grids and Vertical Typographic Rhythm
CSS Grid vs. Flexbox: Two-Dimensional vs. One-Dimensional