What is "fluid design"?
Fluid design (or liquid layout) is an approach in which element widths are set in relative units, most often %, thanks to which the layout stretches together with the browser window, smoothly changing sizes without rigid "steps".
Main idea
Blocks adjust to the width of the viewport, taking up a proportional part of the available space.
Characteristic features
- width is set in percentages:
width: 50%,70%,100% - elements stretch or shrink when the screen width changes
- fonts and spacing can also be relative (for example,
vw,%,em) - the site looks "elastic" without fixed boundaries
Comparison with other approaches
| Approach | What scales |
|---|---|
| Fixed | nothing, rigid px |
| Fluid / Liquid | blocks by width (via %, vw) |
| Elastic | scale based on font size (em, rem) |
| Responsive | rearrangements via media queries |
Summary
Fluid design is an "elastic" layout in which elements change width smoothly and proportionally to the screen width, creating a flexible, stretchable grid.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.