Stages of Squishiness

and Media Queries as Needed

This is a quick demonstration of the way grid tracks resize in stages:

• first explicit tracks
• then auto and minmax() tracks
• and "finally" fraction units

Note that auto == minmax(auto, auto) in behavior.

Jen Simmons "Intrinsic Design" approach refers to these as the "Stages of Squishiness" which (combined with some other features) allow us to rely less heavily on explicit Media Queries.

The side nav grid-track has max-content sizing, and so it is the first to expand — taking up space even on small screens. Then the main area minmax() function expands, and finally the decorative image track with 1fr sizing. But we've achieved an additional 'stage' here, by nesting max() inside minmax(), which allows the main track to expand again after the viewport reaches a particular width.