Responsive CSS in 2026: Container Queries, Grid, and Modern Layout Patterns

Responsive design in 2026 is dramatically better than the media-query-heavy past. Container queries, CSS Grid, subgrid, and modern units like clamp() and dvh have changed the game. Here's how to build responsive layouts with modern CSS.

The Modern Responsive Toolkit

Container Queries — The Game Changer

Media queries respond to the viewport. Container queries respond to the parent element. This means a component adapts to the space it's given — not the browser window. Write once, drop into any layout.

/* Define a container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Style based on container width, NOT viewport */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

Fluid Typography with clamp()

/* Instead of 5 media query breakpoints: */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* min: 2rem, preferred: 5vw, max: 4rem */
  /* Smoothly scales between viewport widths — no breakpoints */
}

p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
}

/* Fluid spacing too */
section {
  padding: clamp(1rem, 5vw, 4rem) clamp(1rem, 5vw, 6rem);
}

Modern Grid Layout

/* Auto-responsive grid — no media queries needed */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}
/* min(300px, 100%) — prevents overflow on mobile.
   auto-fit — adds/removes columns as space allows.
   This one line replaces 3 media queries. */

Dynamic Viewport Height (Fix Mobile Safari)

/* Old way — broken on mobile (Safari toolbar overlaps) */
.hero {
  height: 100vh; /* ❌ Content hidden behind Safari toolbar */
}

/* New way — accounts for dynamic toolbar */
.hero {
  height: 100dvh; /* ✅ Works on all mobile browsers */
  /* dvh = dynamic viewport height.
     svh = smallest (toolbar visible).
     lvh = largest (toolbar hidden). */
}

The :has() Selector — Parent Styling

/* Style a card differently when it contains an image */
.card:has(img) {
  grid-column: span 2;
}

/* Style form group when input is invalid */
.form-group:has(input:invalid) {
  border-left: 3px solid red;
}

/* Style a section when it's empty */
section:has(:not(*)) {
  display: none;
}

Responsive Layout Patterns

Bottom line: Container queries + clamp() + auto-fit grid eliminate 80% of media queries. Modern CSS has absorbed what Bootstrap and Tailwind solved — you can build fully responsive layouts with zero framework CSS. See also: CSS Framework Comparison and Design Tools Guide.