The 2014 way to make a page adapt to any screen was a pile of @media queries, each hard-coded to a device width. Each one broke the moment a phone shipped with a different pixel count. The modern way uses CSS Grid’s auto-fit and auto-fill keywords with minmax() to build layouts that react to the space they occupy, not the browser window they happen to display in. This guide gives you the declarations that make cards appear and disappear, nav items wrap to a new row, and type scale smoothly, all without a single breakpoint.

The core idea is intrinsic sizing. Instead of telling the browser what to do at specific widths, you give it rules that respond to available room. Grid’s repeat() function accepts auto-fit or auto-fill. Pair that with minmax(), and the grid parent measures itself and creates as many tracks as fit. The difference between the two keywords is subtle but critical. auto-fill creates as many tracks as fit, even if some sit empty. auto-fit creates tracks and then collapses the empty ones to zero width. For a card layout where you want the last row to stretch and fill, choose auto-fit. For a layout where you want consistent column widths even when the row is sparse, auto-fill keeps the structure.

Card Grid That Replaces Five Breakpoints

Here is the card grid that replaces five @media queries with one line of CSS:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

That single declaration does the work of a dozen breakpoint rules. When the parent is wide, you get three tracks of 250px each plus a fr unit that distributes the leftover space. When it narrows, you get two columns. Narrower still, you get one. The grid never overflows because minmax() enforces a minimum of 250px on each track, and the fr unit absorbs the extra space. The failure case: if you write repeat(auto-fit, minmax(0, 1fr)), the tracks shrink to zero width and your cards collapse into invisible slivers. Always set a real minimum inside minmax().

Flexbox Wrapping For Element-Driven Layout

Flexbox wrapping is the second half of the puzzle. The default for flex parents is flex-wrap: nowrap. Items shrink rather than break to a new line. Flip that default and you get content-based responsiveness:

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.nav a {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 8rem;
}

flex-basis sets the ideal starting size. flex-grow lets items expand to fill space, and flex-shrink lets them compress when the parent is tight. The min-width on each item is the guardrail. Without it, flex items squash below readability. When the nav runs out of horizontal room, flex-wrap: wrap pushes the last items onto a second row. This is element-driven responsiveness. The break happens based on the actual width of the nav parent and the length of your link text, not on a guessed phone width.

Fluid Type And Spacing With Clamp()

The third tool is clamp() for fluid typography and spacing. Instead of writing a font-size at one width, another at a second width, and another at a third, you give the browser a formula:

.card-title {
  font-size: clamp(1rem, 2vw + 1rem, 2rem);
  padding: clamp(0.5rem, 1vw, 2rem);
}

clamp() takes three values: a minimum, a preferred value that can use viewport units like vw, and a maximum. The browser interpolates between the minimum and maximum based on the browser window width. The interpolation is continuous, not stepped. There is no breakpoint where the font suddenly jumps. The same works for padding, margins, and gap values. The fallback for older browsers is to set a fixed value first and wrap the clamp() in an @supports guard. Every browser that supports CSS Grid also supports clamp(), so you can use it without worry.

Container-Driven, Not Device-Driven

The crucial distinction: all three techniques respond to the parent or the content, not to the browser window. A card grid inside a 400px sidebar shows one column. The same grid inside a wide main area shows four, on the same screen, at the same time. Media queries cannot do that. They only see the window. This is the fundamental shift from device-driven design to container-driven design. The phrase "responsive CSS without media queries" is not a trick. It is a genuinely different approach to layout.

When Intrinsic Sizing Needs Help: Container Queries

Container queries are the next step when intrinsic sizing alone cannot express the condition. The syntax is @container. Declare a container-type on the parent element, then query its width, height, or inline-size inside the child. This is the real replacement for the media query in component design. You can say: when this card's parent is narrower than 400px, switch to a vertical layout. The practical difference from auto-fit: container queries allow arbitrary style changes, not just column counts. Change colors, hide elements, or alter padding based on parent size. Media queries still have a role for document-level things like print styles or dark mode. For layout, container queries are the more precise tool.

Specification And Baseline Status

The specification that defines auto-fill and auto-fit is the CSS Grid Layout Module Level 1, Section 7.2.2, which describes the repeat() syntax. The minmax() function is defined in Section 5.1 of the same specification. Both have been Baseline since September 2017. Every major browser shipped them within the same month. This is not a cutting-edge technique. It is a mature, stable feature you can use in production today. The older fallback, fixed-width grids with @media breakpoints, still works but forces you to maintain a list of device widths that grows every year.

Choosing Between Auto-Fit And Auto-Fill

One of the most common mistakes is treating auto-fit and auto-fill as interchangeable. They are not. With auto-fit, the grid collapses empty tracks. If you have fewer items than tracks, the remaining columns expand to fill the row. This is what you want for a card layout where the last row should stretch. With auto-fill, the empty tracks stay at their minimum size. The columns keep their width even if the row is sparse. This is what you want for a calendar or a data table where every column must be the same width. Choose based on whether you want the layout to fill the space or preserve structure.

Another mistake is forgetting that minmax() accepts a single value. You can write minmax(250px, 1fr) or minmax(250px, auto). The fr unit is not a length. It is a fraction of the available space after fixed tracks are subtracted. If you set minmax(250px, 0.5fr), the track gets half of the remaining space, not half of the parent. Understanding that distinction prevents surprising layouts where columns are narrower than expected.

Auto-Fit, Auto-Fill, Minmax: The Triad

The phrase "auto-fit auto-fill minmax" is the search you type when you forget which keyword collapses empty tracks. The answer, from the spec: auto-fit collapses, auto-fill preserves. In practice, auto-fit is the one you want for most card grids. It makes the last row look intentional. auto-fill is the one you want when you have a fixed number of columns that must remain equal width, like a product comparison table. The minmax() function is the third part of the triad. It sets the lower and upper bounds for each track. Without it, the auto keywords have no size to work with.

Flexbox Wrapping In Detail

Flexbox wrapping layouts work because flex-wrap: wrap changes the behaviour of the flex line from a single rigid row to a series of rows that form as needed. The flex-basis property sets the starting size. When the sum of the flex-basis values exceeds the parent width, the items wrap. The trick is to combine flex-basis with min-width or max-width to prevent items from becoming too small or too large. A common pattern is a navigation bar where each link has flex-basis: auto and min-width: 8rem. Short links stay narrow. Long links wrap to a second row instead of overflowing.

Intrinsic Sizing: The Umbrella Term

Intrinsic sizing responsive design is the umbrella term for all of these techniques. The intrinsic size of an element is its size based on its content, not its parent. When you use min-content, max-content, or fit-content(), you ask the browser to calculate sizes from the content itself. The fr unit is a relative size that distributes space after content sizes are accounted for. The combination of intrinsic sizes with the auto keywords and clamp() creates layouts that are self-aware. They know how much room they need and how much room they have.

Container Queries Vs Media Queries: The Rule

Container queries respond to the size of a parent element. Media queries respond to the browser window or device. Container queries are scoped to the nearest ancestor with a container-type. The same component can behave differently in a sidebar and a main column. Media queries are global. They apply to the whole document regardless of where the component sits. The practical guidance: use intrinsic sizing and grid auto-fit for most layout. Use container queries for the rest. Reserve media queries for document-level conditions like print or screen orientation.

The Repeat() Function And Implicit Tracks

The repeat() function is what makes the auto keywords work. Instead of writing grid-template-columns: 1fr 1fr 1fr, you write repeat(auto-fit, minmax(250px, 1fr)). The browser counts how many tracks fit. The grid-auto-columns property is a separate feature for implicit tracks, added when you place items beyond the explicit tracks. If you use auto-fit, you rarely need grid-auto-columns. The explicit tracks expand to fill the row. If you use auto-fill, you might have empty tracks. grid-auto-columns sets the size for new tracks that appear when you add items dynamically.

Content-Based Breakpoints: The Philosophy

Content-based breakpoints are the concept behind all of this. A media query breakpoint is a guess about what a device needs. A content-based breakpoint is a rule that triggers when the content itself demands it. The flex-wrap example is the clearest illustration. The nav items wrap when they would overflow, not at a specific pixel width. Element-driven responsiveness is the same idea applied to individual components. The card grid creates and destroys columns based on the parent's width, not the window's width. These two phrases describe the philosophy behind the techniques.

Common Mistakes And Their Fixes

Mistake one: using auto-fit when you want auto-fill. Empty tracks collapse and your columns stretch wider than intended. Test with a sparse grid. Decide whether you want the last row to fill or stay narrow. Mistake two: setting minmax() without a real minimum. A minimum of 0 allows tracks to shrink to nothing. Always use a length like 250px or 16rem. Mistake three: forgetting that flex items have a default min-width of auto, which prevents them from shrinking below their content. Set min-width: 0 on the item if you want it to shrink further.

The 2014 Hack This Replaces

The 2014 hack was the media-query breakpoint. A developer would write @media (min-width: 768px) and set grid-template-columns to three columns, then another query for four, and so on. Every new device required a new query. The queries tracked device widths, not content needs. The moment a phone shipped with a width between two breakpoints, the layout broke. The intrinsic sizing techniques here replace that entire class of problems. You still use @media for print or dark mode. For layout, the parent is the unit of measurement.

Complete Card Grid Example

Here is a complete, runnable example that combines the card grid with a header and footer:

<div class="page">
  <header>Site Title</header>
  <main class="card-grid">
    <article>Card 1</article>
    <article>Card 2</article>
    <article>Card 3</article>
    <article>Card 4</article>
  </main>
  <footer>Footer</footer>
</div>

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

grid-template-rows: auto 1fr auto is a classic sticky-footer pattern without a media query. The header and footer take their natural height. The main area expands to fill the remaining window height. The card grid inside the main area then does its own column math based on the main area's width. This is the whole system working together: page-level grid, component-level grid, and no breakpoints anywhere.

Navigation Bar That Wraps Gracefully

Here is a navigation bar that wraps gracefully:

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
}
.nav a {
  flex-basis: auto;
  flex-grow: 1;
  min-width: 6rem;
  text-align: center;
  padding: 0.5rem;
}

With justify-content: space-between, the items spread out when there is room. When the parent narrows, the wrap moves items to a new row. The min-width: 6rem on each link prevents them from becoming too narrow to tap. This is the standard pattern for responsive navigation without a hamburger menu. It works in every browser that supports flexbox.

Fluid Type Scale In Practice

Here is a fluid type scale using clamp():

h1 {
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
  line-height: 1.1;
}
body {
  font-size: clamp(1rem, 0.75rem + 0.5vw, 1.25rem);
}

The h1 scales from 1.5rem to 3rem based on the window width. The body text scales from 1rem to 1.25rem. The line-height is set once and does not need to change. The font size scales smoothly. This replaces the old pattern of three different font-size declarations inside three @media blocks.

Browser Support And Baseline

Both auto-fill and auto-fit have been Baseline since September 2017. Chrome, Firefox, and Safari all shipped support in the same month, rare for a layout feature. The fr unit, minmax(), and repeat() are all part of the same specification and have identical support. clamp() shipped later but is still Baseline. The only feature that is not Baseline is container queries. Check the caniuse data for your target browsers before relying on them.

The Fallback For Legacy Browsers

For browsers that do not support CSS Grid, the card layout falls back to a single column. The display: grid declaration is ignored and the items become block elements. This is an acceptable degradation. The content remains readable. If you need a two-column layout in old browsers, use a float-based fallback inside an @supports guard. The maintenance cost is rarely worth it. Accept the single-column fallback and let the grid work its magic for modern browsers.

Performance Considerations

These techniques are faster than media-query-based layouts. The browser does not need to evaluate a list of conditions. The grid auto-fit computation happens once per layout pass, negligible. The main performance risk is using too many auto-fit grids on a single document. Each one performs its own calculation. For most documents, a handful of grids is fine. If you have hundreds, the cost is still measured in milliseconds, not seconds.

Accessibility And Responsive Layouts

Responsive layouts without media queries improve accessibility. They adapt to the user's actual window, including browser zoom and text size increases. When a user zooms in, the window width decreases. The grid reduces its column count automatically. Media queries that set a fixed number of columns break under zoom. The breakpoints are based on CSS pixels, not actual rendered size. Intrinsic sizing respects user preferences for font size and zoom. It is a more robust choice for accessibility.

This approach suits the front-end developer who writes CSS daily and needs a reliable, modern technique that works everywhere. It suits the technical writer who needs accurate statements about intrinsic sizing. It suits the educator who wants to teach layout without the baggage of media queries. It does not suit the developer working on a legacy codebase that must support Internet Explorer 11, there, the fallback is a fixed grid with media queries. It does not suit the developer who needs to change colours or hiding behaviour based on parent size. That requires container queries. And it does not suit the person looking for a JavaScript solution. This is a CSS-only pattern.

Building Responsive Layouts Without Media Queries in CSS Grid and Flexbox