skip to content

In a design system, how does a fixed-width column grid differ from a fluid one, and when would you choose each?

level: middleimportance: should knowfreq 42%

answer

  1. what absorbs the extra width?
  2. columns stretch or margins grow
  3. line length on wide windows
  4. data-dense screens want space
  5. fluid up to a maximum width

basics

~20 s

A fixed grid keeps columns a set width and lets outer margins absorb extra space; a fluid grid stretches its columns with the window while gutters stay fixed. Most systems combine them: fluid up to a maximum content width, then fixed.

solid answer

~40 s

The question is **what absorbs extra width**. In a **fixed** grid, columns and gutters keep a set width and the **margins** grow, so layouts are predictable and text lines stay a comfortable length, but wide windows show empty sides. In a **fluid** grid, **columns** stretch as a proportion of the window while gutters stay fixed, so every unit of space is used, which suits data-dense screens, but text lines and components can stretch uncomfortably. Most systems use a **hybrid**: fluid up to a **maximum content width**, then fixed with growing margins. In an applicant-tracking tool, the pipeline board and candidate table benefit from staying fluid to show more candidates, while a job-description reading page is capped. Another common hybrid pairs a fixed-width side panel with a fluid main area.

go deeper

for a junior

Recall that a fixed grid grows its margins while a fluid grid stretches its columns, and that most systems cap fluid grids at a maximum width.

for a middle

Explain why gutters stay fixed in fluid grids, why reading surfaces are capped, and how a fixed side panel combines with a fluid main area.

for a senior

Show how you would choose per surface in a data-heavy product and document the choice so teams do not reinvent it.

for a principal

Weigh one grid model across all products against per-surface choices, and how that affects the consistency users feel moving between products.

## The question each model answers When the window gets wider, something has to absorb the extra space. The two grid models answer that differently. | | Fixed grid | Fluid grid | |---|---|---| | Columns | set width | stretch with the window | | Gutters | set width | usually set width | | Margins | grow to absorb extra width | usually set width | | Content width | constant | follows the window | | Strength | predictable, controlled line length | uses all available space | | Weakness | empty sides on wide windows; must switch below its width | long lines and stretched components on wide windows | In a fluid grid the gutters normally stay fixed while the columns stretch, because gutters are separation: separation that doubles on a wide window looks loose, while columns that grow carry more content. ## When a fixed grid fits - **Reading surfaces**, where comfortable line length matters more than using every unit of width: a job description, an offer letter, a help article. - **Marketing and editorial pages**, whose composition was designed as a whole and breaks when stretched. - **Pixel-precise compositions**, such as a hiring landing page with images and text placed together. The cost is that below its width the fixed grid must switch to a narrower configuration, and above it the sides stay empty. ## When a fluid grid fits - **Data-dense tools**, where more width means more information: a recruiter's pipeline board shows more stages, a candidate table shows more columns. - **Dashboards** and **workspaces** that users keep open on large monitors all day. - **Native mobile screens**, which almost always fill the device width. The cost is that content designed at one width must behave at every width in between, and text blocks need their own maximum width so paragraphs do not become unreadably long. ## The hybrids most systems actually use 1. **Fluid with a maximum width.** The grid is fluid until the content area reaches a cap, then the margins grow. This keeps small and medium windows fully used and stops the layout from stretching forever. 2. **Fixed panel plus fluid main area.** A navigation rail or a candidate side panel keeps a fixed width, and the remaining area carries its own fluid column grid. This is common in productivity tools, where the side panel's contents do not benefit from extra width but the main work area does. 3. **Per-surface choice.** One product can use a capped grid for reading pages and an uncapped fluid grid for its data views, as long as both share the same gutter and column logic. ## Choosing for an applicant-tracking tool - The **pipeline board** stays fluid, because recruiters on wide monitors want to see every stage without scrolling sideways. - The **candidate profile** uses a fixed side panel for contact details and a fluid main area for the résumé and activity. - The **job description editor** caps its content width, because long lines slow reading. ## What the system documents - For each window-size range: the column count, gutter, margin, and whether columns stretch. - The maximum content width, and which surfaces may exceed it. - How fixed-width panels combine with the grid, so teams do not invent their own arithmetic. Where the window-size ranges begin and end is a separate breakpoint decision; the grid model defines what happens inside each range. ## Common mistakes - **Stretching everything.** A fluid grid with no cap turns a two-line job summary into one line across a wide monitor, and a form's text fields into bars far longer than any input. - **Fixing everything.** A fixed grid on a data tool leaves recruiters with wide monitors staring at empty sides while the candidate table scrolls sideways. - **Stretching the gutters.** Proportional gutters make wide layouts look loose and break the link between gutters and the spacing scale. - **Undocumented hybrids.** A side panel whose width each team picks differently produces a slightly different main area on every screen, and nothing lines up across the product. - **Ignoring the in-between widths.** A fluid layout designed only at its smallest and largest widths often breaks at an awkward width in between, such as a laptop window docked to half the screen.

  • In a fluid grid, why do the gutters usually stay fixed while the columns stretch?
    Gutters are separation. Separation that grows with the window makes a wide layout look loose and disconnected, while columns that grow can hold more content. Keeping gutters fixed also keeps them on the spacing scale, so the space between components matches the space elsewhere in the system.
  • Why cap a fluid grid at a maximum content width?
    Beyond some width, stretched content stops helping: text lines become too long to read comfortably, form fields stretch far beyond their input, and eyes travel too far between related items. Capping the content area and letting the margins grow keeps the layout comfortable, while surfaces that genuinely benefit from more width, such as a data table, can be exempt.

saying these in an interview costs you the question

  • A fixed grid wastes nothing on wide screens because its columns fill the width.
  • In a fluid grid the gutters must stretch in proportion to the columns.
  • One product must choose a single grid model for every surface.
  • A fluid grid makes long text comfortable to read at any width.