GFX-301i · Module 1

Fluid Layout Systems

4 min read

Breakpoints define discrete layout modes. Fluid layouts handle everything between the breakpoints — the continuous adaptation that prevents layouts from looking "wrong" at any width.

The fluid toolkit: clamp() for any value that should scale with viewport width (font sizes, spacing, container widths). min() and max() for values with absolute limits. CSS Grid with minmax() and auto-fit for content grids that reorganize automatically. Container queries for components that adapt to their container, not the viewport.

Our fluid spacing scale: gap sizes use clamp(12px, 1.5vw, 24px) for tight spacing and clamp(24px, 3vw, 48px) for section spacing. At 480px: tight = 12px, section = 24px. At 1920px: tight = 24px, section = 48px. At 1200px: tight = 18px, section = 36px. Every width between breakpoints produces a proportional, comfortable layout — no jumps, no cramping, no excessive whitespace.

For AI-generated layouts: the concept mockup is generated at the widest breakpoint (1920px). The fluid behavior is specified in the design tokens, not in the image. The developer implements the fluid values from the design system. The prototype is tested at every 100px increment from 375px to 2560px to verify that no intermediate width looks broken.

Do This

  • Use clamp() for fluid spacing, font sizes, and container widths — continuous adaptation
  • Test at every 100px increment, not just at breakpoints — the in-between widths reveal fluid failures
  • Define fluid values in the design system — they are not per-component decisions

Avoid This

  • Use fixed values between breakpoints — the layout looks designed at two widths and wrong everywhere else
  • Test only at device widths — 1000px might be where your layout looks worst, and no common device hits it
  • Let components decide their own fluid behavior — consistency requires system-level fluid values