Make an article layout whose type scales gently with the viewport while line length remains readable on wide displays.
Requirements
Use clamp for font size
Constrain line length with ch
Preserve comfortable line-height
Show a hint
Write down the input contract and the failure cases before coding.
local runtime
RUNTIME OUTPUT
Use your CSS runtime locally, then compare with solution.css.
Use your local runtime, then review the reference solution
LEARN FROM THE SOLUTION
Why the solution works.
The container uses characters rather than an arbitrary pixel width because reading comfort follows line length. clamp prevents text from becoming too small on phones or too large on wide screens while allowing a subtle middle range.
What this exercise teaches
clamp
Readable measure
Fluid typography
A PRACTICAL PLAN
Work through Create a fluid reading layout with intent.
Translate the contract.Turn the requirements into a short checklist before editing your-solution.css.
Use the example as evidence.Predict the result for the supplied input, then add one boundary case such as an empty value, a limit, or unexpected input.
Review the implementation.Compare your choices against solution.css only after a real attempt.
EXERCISE FAQ
Before you move on.
What does “Create a fluid reading layout” teach?
This intermediate CSS exercise focuses on clamp, Readable measure, Fluid typography. Its requirements define the exact behavior to implement before you write code.
How should I validate this CSS solution?
Apply the CSS to a small HTML fixture in your browser, check narrow and keyboard states, then compare the design decisions in solution.css.
When should I open the reference solution?
Attempt Create a fluid reading layout first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
