Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain css using a clear mental model · Apply css in practical CSS work
- Last updated
- July 18, 2026
Let intrinsic sizing solve the easy cases
Before writing a media query, use max-width, min(), max(), clamp(), flexible Grid tracks, wrapping Flexbox, and responsive media. These tools handle a range of widths without branching.
.wrapper { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.title { font-size: clamp(2rem, 1.5rem + 2vw, 4rem); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem; }Add breakpoints where the layout fails
Start with the narrow layout because it forces content priorities to be explicit. Expand gradually and add a min-width query at the first point where a better arrangement becomes possible—not at a device brand’s advertised width.
Make reusable components container-aware
A card may appear in a wide main column or a narrow sidebar at the same viewport width. Container queries let its layout respond to available component space instead of assuming page width predicts its context.
.card-region { container: cards / inline-size; }
@container cards (min-width: 34rem) {
.card { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
}Test continuously, not at three screenshots
Drag through the full width range, zoom, enlarge text, substitute long content, and test nested containers. A layout that only works at three preset widths is not responsive; it is three fixed designs.
Frequently asked questions
How many CSS breakpoints should a page have?
As few as the content and layout require. Different components may need different transition points, especially when container queries are appropriate.
Are mobile-first media queries always required?
They are a strong default because narrow constraints clarify priorities, but the key principle is a useful base style with complexity added only where needed.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps