Create a card grid that moves from one column on small screens to as many balanced columns as will fit, without hard-coding a device breakpoint.
Requirements
Use CSS Grid
Use repeat and minmax
Keep a consistent gap between cards
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.
auto-fit lets the container decide how many tracks fit. minmax gives each card a useful minimum and lets it share remaining space, while min(100%, 16rem) prevents the minimum itself from overflowing a narrow container.
What this exercise teaches
CSS Grid
Intrinsic sizing
Responsive layouts
A PRACTICAL PLAN
Work through Build a responsive pricing grid 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 “Build a responsive pricing grid” teach?
This intermediate CSS exercise focuses on CSS Grid, Intrinsic sizing, Responsive layouts. 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 Build a responsive pricing grid 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.
