CSS breakpoints for responsive design.

Breakpoints are the points at which your layout pivots: where a sidebar drops below content, where columns collapse, where a navbar turns into a hamburger menu. Choose them well and your site feels right on every device. Choose them badly and you will be patching media queries forever.

01Why breakpoints exist

Screens vary wildly — from 320px phones to 4000px monitors. A layout that looks balanced at 1440px will feel cramped at 360px and adrift at 2500px. Breakpoints are where we tell the browser “the rules change here”.

02Two schools of thought

There are two competing philosophies, and the right answer is “a bit of both.”

Device-led

Pick breakpoints that match common device widths: 640px (small tablet), 768px (tablet), 1024px (small laptop), 1280px (laptop), 1536px (desktop). This is what Tailwind, Bootstrap, and most CSS frameworks do.

Pro: predictable, easy to communicate with designers. Con: the breakpoints do not necessarily match where your layout breaks.

Content-led

Resize the browser until your layout looks bad. That is your breakpoint. Pick whatever width makes the content uncomfortable, and put the breakpoint there.

Pro: breakpoints match real problems in your design. Con: you will end up with weird values like 813px that future you has to explain.

03My default breakpoints

/* xs */  @media (min-width: 480px) { … }
/* sm */  @media (min-width: 640px) { … }
/* md */  @media (min-width: 768px) { … }
/* lg */  @media (min-width: 1024px) { … }
/* xl */  @media (min-width: 1280px) { … }

04Write mobile-first

Start with the smallest screen layout, then use min-width queries to add complexity as the screen grows. The alternative — desktop-first with max-width queries — leads to fighting yourself.

/* mobile: stack vertically */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* tablet+: two columns */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* desktop+: three columns */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

05Container queries in 2026

For seven years we only had viewport-based media queries. As of 2023, every modern browser supports container queries — letting components respond to their parent’s width, not the window’s.

.card-grid {
  container-type: inline-size;
}

@container (min-width: 640px) {
  .card { grid-template-columns: 1fr 2fr; }
}

If you are building reusable components — design system cards that might end up in a wide hero or a narrow sidebar — reach for container queries. They have genuinely changed how I write CSS in 2026.

06Common mistakes

• Too many breakpoints. Five is plenty for almost any site. If you have 14, something is wrong.
• Magic pixel values everywhere. Define your breakpoints once (CSS variables or Sass) and reuse.
• Testing only the breakpoint, not what is between. Resize through every width to catch awkward in-between states.
• Hiding content on mobile. If it matters on desktop, it matters on mobile. Make it work, do not disappear it.

Breakpoints are not magic — they are just where you change your mind. Get comfortable with the dance.