Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Fluid Vertical Rhythm System

Problem: Fluid Vertical Rhythm System

Try to 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) ...