Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
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.
Write down the input contract and the failure cases before coding.
Ready to run the file open above.
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.
your-solution.css.solution.css only after a real attempt.This intermediate CSS exercise focuses on CSS Grid, Intrinsic sizing, Responsive layouts. Its requirements define the exact behavior to implement before you write code.
Open your-solution.css and select Run code. The CSS is applied to a sandboxed preview, the same way course CSS blocks run.
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.