How to Build Responsive Layouts Without Media Queries

Beyond Breakpoints

Traditional responsive design relies on media queries with fixed breakpoints. Modern CSS offers intrinsic approaches where elements respond to their own size rather than the viewport.

Fluid Typography with clamp()

The clamp() function sets a value with a minimum, preferred, and maximum:

font-size: clamp(1rem, 2.5vw, 2rem);

This creates smoothly scaling text that never gets smaller than 1rem or larger than 2rem, with the preferred size based on viewport width.

Fluid Spacing

Apply the same technique to padding, margins, and gaps:

padding: clamp(1rem, 3vw, 3rem);

Intrinsic Grid Layouts

CSS Grid's auto-fit and minmax() create grids that automatically adjust column count based on available space:

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

This creates as many 280px-minimum columns as will fit, expanding each to fill remaining space.

Container Queries

Container queries let elements respond to their container's size rather than the viewport. This is ideal for reusable components that may appear in different layout contexts (main content, sidebar, modal).

.card-container { container-type: inline-size; }
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

When to Still Use Media Queries

Media queries remain useful for major layout shifts (e.g., showing/hiding a sidebar), dark mode preference detection, and print styles.