The one-breakpoint approach

Most sites need ONE breakpoint, not six

.layout {
  display: grid;
  grid-template-columns: 1fr;        /* mobile default: single column */
  gap: 20px;
  padding: clamp(1rem, 4vw, 3rem);
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .layout { grid-template-columns: 240px 1fr; }   /* tablet+: sidebar + main */
}

ONE breakpoint at ~720px (rough tablet threshold). Everything else is fluid: padding clamps, gaps clamp, max-width caps, font-sizes clamp.

Compare to the 2010-era responsive approach:

@media (min-width: 480px) { ... }
@media (min-width: 640px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 1024px) { ... }
@media (min-width: 1280px) { ... }
@media (min-width: 1600px) { ... }

Six breakpoints = six places to forget to update when a design changes.

When more breakpoints help

• Dense data tables (column counts change at multiple sizes).
• App layouts with distinct mobile/tablet/desktop personalities.
• Marketing sites with hero variants per breakpoint.

But for most CRUD apps, dashboards, and blog-style content: ONE breakpoint + fluid sizing covers 90%.

The mental shift

Old: "Mobile, then tablet, then desktop, then large desktop — design each."

New: "What's the smallest reasonable view? What's the largest? Make everything between flow smoothly."

The single breakpoint then handles the ONE structural change (usually "sidebar appears" or "menu becomes hamburger") that fluid sizing can't accomplish.