Mostly fluid

Mostly fluid is the plainest of the five responsive layout patterns Luke Wroblewski catalogued from early responsive sites, and by a wide margin the most used. One grid, a few columns, tracks that stretch as the window widens, a maximum width past which the grid stops growing and centres itself, and a single breakpoint near the bottom where the columns give up and stack. That is the whole pattern. If you are describing a site and cannot decide which pattern it is, it is probably this one, which is the reason the word is worth having: most responsive layouts are mostly fluid, and saying so is more useful than calling them responsive and stopping there.

With this entry the set of five is complete on the site. Tiny tweaks changes only type, images and margins. Column drop loses full height columns one at a time. Off canvas parks a region outside the viewport until it is asked for. Layout shifter gives each size its own composition. Mostly fluid is the one that changes least while still being a grid: between the stacking breakpoint and the maximum width, nothing rearranges at all, and the layout is simply wider or narrower. That makes it the cheapest of the five to build and to review, because there is one arrangement to get right rather than two or three.

The interesting decision is the maximum, and it is a typographic decision rather than a layout one. The grid stops growing where the longest column of text would otherwise pass a comfortable measure, which in practice puts the cap somewhere around 60 to 75 characters for the widest text track and lets everything else be sized from that. Set the cap with max-width on the container, or let a minmax() track and margin-inline: auto do it, and state the number somewhere a reviewer can find it: a cap that nobody wrote down gets raised by the first person who thinks the page looks empty on a large monitor.

What happens above the cap is a separate design problem, and mostly fluid does not answer it. The pattern says growth stops; it does not say what the leftover room is for. Left alone it becomes symmetric empty margin, which is a legitimate answer and often the right one. Responsive upscaling is the term for taking that room seriously instead and giving it a job, a promoted sidebar or a second column of secondary content, and the distinction is worth keeping straight in review: a page that looks thin on a large screen usually does not need a bigger cap, it needs a decision about the margins.