Fluid layout vs fixed-width layout
Fluid layouts stretch with the window; fixed-width layouts hold one width. Most modern pages stretch until they reach a sensible cap.
See it
What it is
A fluid layout grows and shrinks with its container, usually through percentages or flexible grid tracks. A fixed-width layout keeps a chosen pixel width and lets the outside margins change. The boxed 960px sites of the 2000s were fixed, and Nathan Smith's 960 Grid System made that width close to a default; a row of 1fr CSS Grid tracks is fluid.
Pure versions of either are rare now. Most pages use a hybrid: a fluid shell that fills small screens, capped by a max-width so lines and cards do not become enormous on a desktop monitor. Reach for fixed dimensions inside that shell only where predictability matters, such as an avatar or narrow navigation rail.
Gotcha: fixed-width does not mean position: fixed, and fluid does not mean every element gets width: 100%. An uncapped fluid article becomes hard to read, while a rigid 1200px page creates horizontal scrolling on a phone. Test the spaces between your named breakpoints, not just the device presets.
Ask AI for it
Build a comparison showing fluid and fixed-width page shells at 360px, 800px, and 1440px container widths. Make the fluid shell width: 100% with percentage-based CSS Grid tracks; make the fixed shell width: 960px. Then add a production hybrid using width: min(100% - 2rem, 72rem) and margin-inline: auto. Mark any horizontal overflow visibly and keep article text capped at 65ch so the tradeoff is obvious.