Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Vertical Rhythm

Solution: Fluid Vertical Rhythm

Let’s scale text rhythm fluidly using CSS clamp() and custom properties between 1rem and 2rem.

We'll cover the following...

Problem description

Create a responsive vertical rhythm where the spacing between text elements (headings and paragraphs) scales fluidly with the viewport width. Specifically, use CSS variables and clamp() to adjust the line-height and bottom margin of <h1>, <h2> ...