From Fixed to Liquid to Responsive Layouts

Fixed layouts and the pixel wrapper

For a long stretch of web history, most pages were built inside a wrapper of fixed width, centered in the window. Widths such as 760 or 960 pixels were popular because they fit the common desktop resolutions of the time with room for a scrollbar.

.container {
  width: 960px;
  margin-inline: auto;
}

On a screen close to that size, the result looked tidy. On a smaller window it produced a horizontal scrollbar, and readers had to drag sideways to reach the sidebar. On a large monitor the column sat in the middle of wide empty margins. The approach treated the browser like a printed page with a known size, which it never really was.

Liquid layouts and percentage columns

Liquid layouts answered this by sizing columns in percentages instead of pixels. The page filled whatever window it was given, and columns grew and shrank with it. Before flexbox and grid existed, floats did the positioning:

.main {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 30%;
}

The important idea was not the floats, which were always a workaround, but the attitude: the layout should adapt to the reader's window rather than demand a particular one. That idea became the foundation of everything that followed.

Where pure liquid layouts broke down

Percentages solved horizontal scrolling but created two new problems at the extremes. On a narrow window, a three column liquid layout squeezed each column into a thin strip where only a few words fit per line. On a wide monitor the same columns stretched until a paragraph ran as a single long line, and readers lost their place moving from the end of one line to the start of the next.

Both problems had the same cause. A percentage scales without limits in either direction, and readable text needs limits.

Media queries change the arrangement

Responsive design kept the fluid widths and added conditions. With media queries, a stylesheet can change the layout at chosen widths, so a multi column page can become a single column on a phone instead of shrinking into slivers.

.column {
  width: 100%;
}

@media (min-width: 48rem) {
  .column {
    width: 50%;
  }
}

This example is written mobile first: the single column is the default, and the wider arrangement is added when space allows. Setting the breakpoint in rem means it also responds to the user's font size setting, not just the window width.

Breakpoints work best when they follow the content. Widen the window until the layout starts to look strained, and add a breakpoint there, instead of guessing at device sizes that change every year.

Capping line length

The most useful lesson from the liquid era is that text needs a maximum width. A container can be fully fluid on small screens and still stop growing once lines reach a comfortable length:

.article-body {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

The ch unit is based on the width of the zero character in the current font, so the limit scales with the font size. Something between roughly 60 and 75 characters per line is a common target for body text. The padding keeps the text off the screen edges when the column is narrower than its maximum.

Flexible images

A fluid column is only as flexible as its contents. An image with a fixed pixel width will overflow a column that has shrunk below it. The standard fix is short:

img,
video {
  max-width: 100%;
  height: auto;
}

Images can now shrink with their container but never grow past their natural size, and height: auto keeps their proportions intact. Pair this with width and height attributes in the HTML so the browser can reserve the right space before the file arrives.

Grid, flexbox and container queries

Modern layout tools build on the same principles with far less effort. CSS Grid can create a responsive card layout with no media queries at all:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
}

Each column is at least 16rem wide, or the full width of the container if that is smaller, and the browser fits as many columns as the space allows. The min() wrapper stops the grid from overflowing on very narrow screens.

Container queries take the idea one step further. Instead of reacting to the window, a component can react to the width of its own container, so a card can switch from stacked to side by side depending on where it is placed. Grid, flexbox, clamp() and container queries are supported in all current major browsers.

Fluid type and spacing

The liquid idea also applies to sizes other than column widths. Instead of jumping from one font size to another at a breakpoint, text can scale smoothly between a minimum and a maximum with clamp():

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}

The heading never gets smaller than the first value or larger than the last, and in between it grows with the window. Mixing a rem value into the middle term matters: a size based only on viewport units would ignore the reader's font size setting and would not grow when someone zooms in. The same pattern works for padding and gaps, so spacing tightens on phones and opens up on large screens without a stack of media queries.

What carries over

Each stage kept something from the previous one. Fixed layouts taught designers to plan a page carefully. Liquid layouts proved that pages could adapt to the reader's window. Responsive design added the conditions and limits that keep that flexibility readable.

When you open an older liquid template today, the percentages and floats are dated, but the intent is sound. Replace the floats with grid or flexbox, add a max-width to text containers, make images flexible, and the layout becomes a perfectly usable responsive page.

Frequently asked questions

What is the difference between liquid and responsive layouts?

A liquid layout sizes columns in percentages, so they stretch and shrink with the window but keep the same arrangement. A responsive layout adds media queries or intrinsic grid sizing so the arrangement itself changes, for example from three columns to one.

Why do pure liquid layouts struggle on large screens?

Without an upper limit, text columns keep widening on big monitors and lines become too long to read comfortably. Adding a max-width keeps the flexibility on small screens while capping line length on large ones.

How does max-width help a fluid layout?

It lets an element shrink freely below a set size but stops it growing past that size. Combined with auto side margins, it produces a centered column that adapts to phones and stays readable on wide displays.

Why use ch units for text width?

One ch equals the width of the zero character in the current font, so a width in ch tracks the font size. A limit somewhere around 60 to 75ch keeps line length in a comfortable range.