Setting type on a baseline grid

I wanted a graph-paper background for my garden site. My first instinct was to drop in a repeating gradient and move on — and it looked like wallpaper, because the text ignored it.

The trick is locking line-height to the grid cell. With a 24px cell, body text gets line-height: 24px exactly, headings 48px, and every margin is a multiple of 24. Now the text actually rules on the lines, like writing in a real squared notebook.

:root { --cell: 24px }
body { line-height: var(--cell) }
h1   { font-size: 32px; line-height: 48px; margin: 48px 0 24px }

Two details that mattered more than expected:

• Round corners fight ruled geometry. Pills and border-radius: 12px looked wrong on squared paper. Making everything square fixed it instantly.
• Opaque cards break the illusion. Code blocks and callouts need a translucent wash so the grid shows through, otherwise they read as stickers on top of the paper.