Choosing Breakpoints for Responsive Layouts

Base Breakpoints on Content, Not Specific Devices

It is tempting to pick breakpoints that match popular phone or tablet widths exactly, but new device sizes appear constantly. A more durable approach is to resize the browser window gradually and add a breakpoint only at the point where the actual content starts to look cramped or awkward - regardless of which device that width belongs to.

Commonly Used Reference Ranges

These are only useful as a starting reference - the real breakpoints should still be chosen based on where a specific design actually breaks.

A Practical Mobile-First Example

.cards {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Avoid Adding Too Many Breakpoints

Every extra breakpoint is another layout to maintain and test. Most projects can cover the vast majority of real screens with two or three well-chosen breakpoints, rather than trying to fine-tune for every possible width.

A Modern Alternative: Container Queries

For components that need to adapt based on the space available to them - rather than the whole viewport - container queries (covered separately in this section) can reduce the need for some breakpoints entirely.