{"id":9317,"date":"2026-04-15T13:51:41","date_gmt":"2026-04-15T18:51:41","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9317"},"modified":"2026-04-15T13:51:43","modified_gmt":"2026-04-15T18:51:43","slug":"building-a-ui-without-breakpoints","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/building-a-ui-without-breakpoints\/","title":{"rendered":"Building a UI Without Breakpoints"},"content":{"rendered":"\n

Breakpoints have dominated responsive design since we started building for the web. The model is familiar, convenient, teachable, and still widely used in production systems today.<\/p>\n\n\n\n

While breakpoints were an excellent answer to a real problem when multiple screen sizes emerged, modern interfaces are no longer page-first. They are component-first, nested, and reused across wildly different contexts. In that world, global viewport width is frequently the wrong input for local layout decisions.<\/p>\n\n\n\n

This article proposes a different approach, one that better fits the modern web: build fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.<\/p>\n\n\n\n

We should still use media queries, but mostly for real device capabilities and user preferences, not as the primary layout engine. We will return to that part later.<\/p>\n\n\n\n

What Breakpoints Solved, and Why They Won<\/strong><\/h2>\n\n\n\n

Breakpoints were a major improvement over fixed desktop layouts. They gave teams a practical way to support phones, tablets, and desktops with explicit CSS branches.<\/p>\n\n\n\n

The model was simple:<\/p>\n\n\n\n

    \n
  1. Pick important viewport widths.<\/li>\n\n\n\n
  2. Define how layout and sizing change at those points.<\/li>\n\n\n\n
  3. Keep adding rules as product complexity grows.<\/li>\n<\/ol>\n\n\n\n

    That simplicity is exactly why breakpoints became standard.<\/p>\n\n\n\n

    Here is a very typical pattern you can still find in many codebases:<\/p>\n\n\n

    .page<\/span> {\n  width<\/span>: 90%<\/span>;\n  font-size<\/span>: 16px<\/span>;\n}\n\n.card-grid<\/span> {\n  display<\/span>: grid;\n  gap<\/span>: 1em<\/span>;\n  grid-template-columns<\/span>: 1<\/span>fr;\n}\n\n@media<\/span> (min-width:<\/span> 768px<\/span>) {\n  .card-grid<\/span> {\n    grid-template-columns<\/span>: repeat<\/span>(2<\/span>, 1<\/span>fr);\n  }\n}\n\n@media<\/span> (min-width:<\/span> 1024px<\/span>) {\n  .page<\/span> {\n    width<\/span>: 920px<\/span>;\n    font-size<\/span>: 18px<\/span>;\n  }\n\n  .card-grid<\/span> {\n    grid-template-columns<\/span>: repeat<\/span>(3<\/span>, 1<\/span>fr);\n  }\n}\n\n@media<\/span> (min-width:<\/span> 1280px<\/span>) {\n  .card-grid<\/span> {\n    grid-template-columns<\/span>: repeat<\/span>(4<\/span>, 1<\/span>fr);\n  }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    There is nothing inherently wrong with this style. The challenge appears at scale, where dozens of components with repeated viewport branches quickly increase CSS size, complicate overrides, and increase coupling between unrelated parts.<\/p>\n\n\n\n
    Why Breakpoint-First Layout Is Aging Out<\/h2>\n\n\n\n
    With all due respect to breakpoints, the environment we build for today is very different. The growing variety of screen types, sizes, and pixel densities raises a practical question: which breakpoints should we even target, and which legacy thresholds remain meaningful? As device diversity continues to expand, breakpoint selection becomes less a stable system and more a moving guess.<\/p>\n\n\n\n
    At the same time, we now know that layout logic is not always best tied to screen width. It usually works better when it is tied to component context. The same component can appear in a full-width feed, a narrow sidebar, a modal, and a dashboard tile, often in the same app. When components live in different containers, viewport-based rules can produce mismatched behavior, force unnecessary exceptions, and make component reuse less predictable.<\/p>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    And when we look at day-to-day implementation, we see that most responsive changes are not true structural pivots. There are gradual shifts in space negotiation, density, typography, and rhythm. A breakpoint-first mindset forces many of those shifts into discrete jumps, often leading to repeated logic, long override chains, and fragile interactions when a tweak to one breakpoint unexpectedly affects another component.<\/p>\n\n\n\n
    The good news is that modern CSS gives us better primitives than we had before. If we make those primitives our baseline, we can build interfaces that stay fully responsive with less branching, cleaner code, and far more predictable behavior over time.<\/p>\n\n\n\n
    Method 1: Intrinsic Layouts First<\/strong><\/h2>\n\n\n\n
    The first move is to push adaptation into layout primitives themselves. Instead of saying, “at width X, force N columns,” define constraints and let the browser derive the layout continuously.<\/p>\n\n\n\n
    The Ubiquitous Card Grid<\/h3>\n\n\n\n
    A good example is a common card grid, similar to the code snippet above. Instead of hardcoding column counts at breakpoints, we can use auto-fit<\/code> and minmax()<\/code> to create a grid that naturally fills available space while respecting a minimum card width.<\/p>\n\n\n
    .grid<\/span> {\n  \/* Basic card grid styles *\/<\/span>\n  display<\/span>: grid;\n  gap<\/span>: 1em<\/span>;\n}\n\n.with-breakpoints<\/span> {\n  \/* Traditional breakpoint-based grid *\/<\/span>\n  grid-template-columns<\/span>: 1<\/span>fr;\n\n  @media (min-width<\/span>: 720px<\/span>) {\n    grid-template-columns: repeat<\/span>(2<\/span>, 1<\/span>fr);\n  }\n\n  @media<\/span> (min-width:<\/span> 1024px<\/span>) {\n    grid-template-columns<\/span>: repeat<\/span>(3, 1fr<\/span>);\n  }\n\n  @media<\/span> (min-width:<\/span> 1360px<\/span>) {\n    grid-template-columns<\/span>: repeat<\/span>(4, 1fr<\/span>);\n  }\n}\n\n.with-auto-fit<\/span> {\n  \/* Intrinsic grid without breakpoints *\/<\/span>\n  grid-template-columns<\/span>: repeat<\/span>(auto-fit, minmax(320px<\/span>, 1<\/span>fr));\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n