By the end of this lesson you can
- Choose breakpoints based on content, not specific devices.
- Define how grids, type and components change at each breakpoint.
- Document responsive behaviour in a design system.
The idea
A breakpoint is a width at which the layout changes. Good breakpoints come from content: where does this layout start to look cramped or stretched? Device lists change every year; content needs do not.
What changes at breakpoints
- Grid: number of columns, gutter and margin sizes.
- Navigation: full menu, collapsed menu, bottom bar or side rail.
- Typography: larger headings on wide screens; sometimes fluid sizes that scale smoothly.
- Components: tables become cards, side panels become sheets, multi-column forms become single column.
- Density: more information per screen on large displays.
System-level breakpoints
A design system typically defines a small set of named breakpoints (for example small, medium, large, extra large) with grid settings for each. Components document how they behave at each. Container queries in CSS now also let components respond to the space they are given rather than the whole screen.
Why it matters in real projects
Consistent breakpoints let every team design responsive screens the same way and give developers clear rules. Content-based breakpoints produce layouts that work on devices nobody has invented yet. Documenting component behaviour avoids each team solving the same responsive problems differently.
A realistic example
A news site chose breakpoints matching three specific phones and an old tablet. New devices fall between them, causing awkward layouts: articles with very long lines and cramped sidebars.
The team redesigns by dragging layouts wider and narrower and marking where each breaks. They settle on four named breakpoints, cap article width, switch the sidebar below content under the medium breakpoint and use fluid heading sizes. Layouts now hold up on every width tested.
Step by step
Start small
Design the content at the smallest supported width.
Widen slowly
Increase width until the layout looks wrong.
Mark the breakpoint
Note the width and what should change.
Repeat
Continue to the widest width you support.
Name and round
Group nearby breakpoints into a small named set.
Document
Write grid settings and component behaviour per breakpoint.
Common mistakes
Mistake Breakpoints copied from specific devices.
Instead Base them on where content breaks.
Mistake Too many breakpoints.
Instead Keep a small named set.
Mistake Undocumented component behaviour.
Instead Write how each component adapts.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Breakpoint study
Find content-based breakpoints for an article page.
Steps
- Design the article at 320px.
- Widen in steps and mark where it breaks.
- Define three or four named breakpoints.
- Document what changes at each.
Deliverable
A breakpoint table with screenshots.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Breakpoints are widths where layout changes.
- Base them on content, not devices.
- Grids, navigation, type, components and density can change.
- Document breakpoints and component behaviour.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.