Creating a Vertical Rhythm with CSS Grid

from blog Aleksandr Hovhannisyan, | ↗ original
Margins are commonly used to space paragraphs in an article, but CSS Grid offers a more intuitive alternative that defines the spacing at the layout level.
This is a short summary. ↗ Open original to view full content

Related

Spacer elements
Gus Hogg-Blake | original ↗
The Difference Between Explicit and Implicit Grids
Manuel Matuzović - Blog | original ↗
The Thing With Leading in CSS
Matthias Ott | original ↗
Day 96: the margin-trim property
Manuel Matuzović - Blog | original ↗
CSS Grid Areas
Piccalilli - Everything | original ↗
Another Collection of Interesting Facts about CSS Grid Layout
Manuel Matuzović - Blog | original ↗
The Dark Side of the Grid (Part 1)
Manuel Matuzović - Blog | original ↗
How I Built The Monospace Web
Oskar Wickström | original ↗
An Interactive Guide to CSS Grid
Josh Comeau's blog | original ↗
Resolving CSS Gridlock
Matthias Ott | original ↗

More from Aleksandr Hovhannisyan

Performant Game Loops in JavaScript
29 Dec 2024 | original ↗

A look at some best practices for creating performant game animations in JavaScript.

Creating Perfect Font Fallbacks in CSS
12 Dec 2024 | original ↗

Learn how to use three CSS properties to override font metrics and minimize layout shifts during font load.

Preventing Layout Shifts in Status Text with CSS Grid
11 Dec 2024 | original ↗

Use this trick with CSS Grid to prevent layout shifts when swapping text in status indicators.

I Moved to Cloudflare
11 Dec 2024 | original ↗

After some recent incidents involving Netlify and Vercel, I decided to play it safe and move my website and another side project to Cloudflare.

The Perfect Theme Switch Component
27 Nov 2024 | original ↗

Learn how to implement a progressively enhanced theme switch component using HTML, CSS, and JavaScript.