Fluid units and elements — Responsive design

Stop thinking in fixed pixels

A truly responsive design doesn't only jump between breakpoints: it also flows between them. A card with width: 400px is always 400 px, whether it fits or not; one with width: 90% molds to whatever space it has. That's why we use relative units instead of fixed px:

%: relative to the parent container. width: 50% = half of the parent.
rem: relative to the root font size (usually 16 px). Scales with the user's preferences; ideal for typography and spacing.
vw / vh: 1 vw = 1 % of the viewport width; 1 vh = 1 % of the height.

.column {
  width: 90%;          /* flows with the container */
  max-width: 60rem;    /* but doesn't grow without limit */
  margin: 0 auto;      /* centered */
}

Fluid images

An image with a width larger than its container causes horizontal scroll. The golden rule is to make it fluid:

img {
  max-width: 100%;   /* never wider than its container */
  height: auto;      /* keeps the proportion */
}

max-width: 100% lets the image shrink on small screens but not stretch beyond its natural size. It's the basis of responsive media.

Fluid typography with clamp()

Jumping the font size between breakpoints works, but clamp() lets it flow continuously between a minimum and a maximum:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

clamp(MINIMUM, IDEAL, MAXIMUM) reads like this:

Never goes below 1.5rem (readable on mobile).
The ideal value, 4vw, grows with the window width.
Never exceeds 3rem (it doesn't get out of control on huge screens).

Result: a heading that adapts on its own, without a single media query.

Combine with flex and grid

Fluid units shine alongside Flexbox and Grid, which already distribute the available space. A very powerful pattern for responsive galleries without media queries:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

auto-fit + minmax creates as many columns as fit, each at least 220 px and sharing the rest (1fr). On mobile you'll see one column; as it gets wider, two, three, four appear… without you writing a single breakpoint. The layout reorganizes itself. This is expert-level responsive: let the layout engine decide instead of hard-coding each breakpoint by hand.

And that closes the loop: viewport to enable responsiveness, mobile-first to build from less to more, media queries for the big jumps and fluid units for everything else. One website, every screen. 🚀