Skip to main content

What does "elastic layout" mean?

Elastic layout is a type of layout in which element sizes are set in relative units that depend on the font size (usually em or rem). Such a layout is "elastic" not relative to the browser window width, but relative to the base text size, so when the font changes, both the blocks and the whole interface grow (or shrink).

Key features:

  • block widths in em or rem, not in px or %
  • the interface scales proportionally to the change in text size
  • the user can increase the font size, and the layout does not "break"

In comparison:

Layout typeMain dependency
Fluid / liquidon the window width (%)
Elasticon the font size (em, rem)
Fixedfixed px

Summary: Elastic layout is a layout that scales together with the text, preserving the interface's proportions by using em/rem units.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

What does "elastic layout" mean?: CSS Interview Question