Responsive Viewport Units

With all the growing enthusiasm around responsive web design, it was about time CSS got a unit to match. CSS3 Values and Units introduces a new class of viewport-relative lengths that are finally ready for prime time.

Motorola were early adopters, implementing support before these units found their way into Chrome Canary. They are also supported in IE9, though the original vm unit was later renamed to vmin.

The values can be confusing at first: 1vh represents 1% of the viewport height, not the full height. To make an element fill the entire viewport you need 100vh.

On a widescreen monitor at full-screen, the width is greater than the height — so vmin resolves to the same computed value as vh. On a tall narrow phone, the opposite holds.

Viewport units are dynamic. As you resize the browser window, the computed pixel value updates in real time. An element set to 10vw on a 1000px-wide viewport is 100px wide — shrink the window to 400px and the element becomes 40px wide automatically.

One of the persistent pain points with CSS multi-column layout is vertical overflow: if a column block is taller than the viewport, the reader must scroll up and down repeatedly to follow each column. Viewport units offer a neat solution — constrain the height of the multi-column container to something less than 100vh, and let the browser scroll horizontally through additional columns instead.

There is still the matter of horizontal scrolling, which can feel awkward on a desktop browser. But for targeted contexts — tablet-sized devices held in landscape, for instance — it is a reasonable trade-off.

Constraining a multi-column section to 80% of the viewport in both dimensions requires just two declarations. The column width is expressed in rem so the browser can adjust column count as needed. Setting overflow: scroll keeps extra columns hidden until the reader scrolls to them.

This sets the container to 80% of the viewport in both dimensions. column-width: 22rem gives the browser a target column width, but allows it to adjust as needed. overflow: scroll hides the extra columns and makes them scrollable — they won't overflow and overlap any adjacent elements.

Margins on the body element can scale with the viewport too. The snippet below gives 2% of the viewport height as top/bottom breathing room, and 10% of the viewport width as left/right margins:

The result is a layout that breathes proportionally at any window size — wider windows get wider gutters, taller windows get more vertical space. No media queries involved.

With these units you have a genuinely responsive design — at least for simpler layouts — without touching a single media query. Imagine combining them with media queries when you do need discrete breakpoints, or layering in Flexbox for alignment. The result is a layout system that adapts fluidly at every scale.