Problem: Baseline Grid Builder
Problem description
You have a simple HTML document containing multiple headings ( h1, h2) and paragraphs (p). Your task is to define a CSS custom property for a 1rem baseline grid and apply it to both the line-height and bottom margin of all text elements, so each element’s baseline falls on the grid.
Goal
Use only CSS (no JavaScript) to set the line-height and margin-bottom of h1, h2, p and to multiples of a defined 1rem rhythm unit, achieving consistent vertical spacing.
Constraints
Only CSS is allowed.
Use rem units and CSS variables.
Do not alter the HTML structure or add inline styles.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Baseline Grid Builder
Problem description
You have a simple HTML document containing multiple headings ( h1, h2) and paragraphs (p). Your task is to define a CSS custom property for a 1rem baseline grid and apply it to both the line-height and bottom margin of all text elements, so each element’s baseline falls on the grid.
Goal
Use only CSS (no JavaScript) to set the line-height and margin-bottom of h1, h2, p and to multiples of a defined 1rem rhythm unit, achieving consistent vertical spacing.
Constraints
Only CSS is allowed.
Use rem units and CSS variables.
Do not alter the HTML structure or add inline styles.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.