Layout & Space

Content-driven breakpoints

Design the full layout first and collapse to a compact arrangement only when the content no longer fits, rather than guessing a device by viewport width.

A container query switches a two-column row to stacked when the container gets narrow.

Select Toggle to change the width: the layout snaps at a breakpoint

One of 220 cards in the Apple HIG deck. Browse every card.