CSS Breakpoints
CSS breakpoints are specific screen widths where the layout of a responsive website changes to provide a better user experience.
What is a Breakpoint?
A breakpoint is a predefined viewport width where you change CSS styles using media queries.
For example, a website may display three columns on a desktop, two columns on a tablet, and one column on a mobile device.
Responsive Breakpoint Diagram
Simple Explanation
Breakpoints divide different screen sizes into groups. At each breakpoint, the layout can change according to the available screen space.
Breakpoints are normally implemented with CSS media queries.
Common Breakpoint Examples
| Breakpoint | Typical Device | Example Usage |
|---|---|---|
| Below 576px | Small Mobile | Single-column layout |
| 576px – 767px | Mobile / Small Tablet | Compact layout |
| 768px – 991px | Tablet | Two-column layout |
| 992px – 1199px | Desktop | Wider content layout |
| 1200px and above | Large Desktop | Large multi-column layout |
Example: Changing Layout at Breakpoints
The following example starts with a four-column layout. The number of columns decreases as the screen becomes smaller.
.breakpoint-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.breakpoint-box {
background-color: #2563eb;
color: white;
padding: 25px;
text-align: center;
border-radius: 8px;
}
@media (max-width: 1199px) {
.breakpoint-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 991px) {
.breakpoint-grid {
grid-template-columns: repeat(2, 1fr);
}
.breakpoint-box {
background-color: #7c3aed;
}
}
@media (max-width: 575px) {
.breakpoint-grid {
grid-template-columns: 1fr;
}
.breakpoint-box {
background-color: #0f766e;
}
}Output
Resize the browser window to observe the layout changes at different breakpoints.
How This Example Works
Desktop
Above 1199px, the grid displays
4 columns.
Medium Desktop
At 1199px or below, the grid changes to
3 columns.
Tablet
At 991px or below, the grid changes to
2 columns and the box color changes to
#7c3aed.
Mobile
At 575px or below, the grid changes to
1 column and the box color changes to
#0f766e.
How to Choose Breakpoints
Breakpoints should be chosen according to how your content behaves rather than only targeting specific device models.
Recommended Approach
Start with your layout and resize the browser. When the content starts looking crowded or difficult to read, introduce a breakpoint and adjust the layout.
This makes the design more flexible across different screen sizes.
Important Point
Do not create too many breakpoints
Too many breakpoints can make CSS difficult to maintain. Use only the breakpoints that are actually required by your layout.
Real-World Uses of Breakpoints
- Changing navigation layouts
- Adjusting card and grid columns
- Changing font sizes
- Changing spacing and padding
- Making sidebars stack below content
- Creating mobile-friendly forms
Summary
CSS breakpoints define screen widths where a responsive layout changes. They are implemented using media queries and help websites adapt their structure, spacing, typography, and components for different viewport sizes.