Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Vertical Rhythm System

Solution: Fluid Vertical Rhythm System

Let’s implement a fluid vertical rhythm system by scaling the root font-size, line-height, and margin spacing proportionally as the viewport width changes.

We'll cover the following...

Problem description

Given an article container with multiple headings (<h1> and <h2>) and paragraphs (<p>), write CSS rules to:

  1. Define CSS custom properties:

    1. --min-root (16px) and --max-root (20px)

    2. --min-line-height (1.4) and --max-line-height (1.8)

    3. --spacing-multiplier (1.5)

  2. Compute a fluid root font-size --fluid-root using clamp() and a linear interpolation for viewport widths from 360px ...