Constraints and grids — designs that resize

Choose your track

Read this module through your lens

Two different kinds of change

You learned auto layout to survive content change — a label getting longer, a list gaining items. There is a second kind of change a real design must survive: the frame itself getting wider or narrower, because products run on many screen sizes. Auto layout does not fully solve this; you need constraints and grids.

The symptom of ignoring them is familiar: a screen that is pixel-perfect at the one width you designed it, and falls apart at any other. The logo drifts to the middle, the button anchors to empty space, the content clusters on one side. Nothing is “wrong” — you simply never told the elements how to behave when their container resizes, so they all defaulted to staying put.

Mastery of layout means designing for a range of sizes, not a single canvas. Constraints and grids are the tools that make one design hold across that range.

Constraints: how each element anchors

A constraint tells an element how to position and size itself when its parent frame changes width or height. Horizontally, an element can pin to the Left, pin to the Right, stay Centered, stretch to follow both Left and Right edges, or Scale proportionally. Vertically, the same against Top and Bottom. You set these per element in the right panel.

Think in intent. A back button belongs in the top-left always, so pin it Top + Left. A profile icon belongs top-right, so Top + Right. A search field that should span the width between them gets Left + Right, so it stretches as the frame widens. A centered logo gets Center. Get these right and the screen reorganizes itself sensibly at any width.

The crucial habit: actually resize the frame to test. Constraints are invisible until the frame changes size, exactly like rigging is invisible until you pose it. Drag the frame wider and narrower and watch every element; anything that drifts or overlaps has the wrong constraint.

Grids: the shared structure

The other half is the layout grid — a column system you add to a frame and align everything to. A common choice is a multi-column grid (say 12 columns with set margins and gutters), the same structure responsive web layouts use. With it, every element snaps to consistent column boundaries, so alignment stops being eyeballed and becomes systematic.

Grids do two things. They make a screen feel coherent, because everything shares the same underlying rhythm, the way a spacing scale did for gaps. And they give you and engineering a shared language for responsiveness: “this card spans 4 columns, the sidebar spans 3,” which maps directly onto how the build will reflow at breakpoints.

So the full picture: auto layout for content that grows, constraints for how elements respond to frame size, and a layout grid for the structure they all align to. Together they turn a one-width mockup into a design that holds across the real range of devices.

Hands-on exercise

Take a screen and make it responsive. Add a layout grid and align the content to its columns. Set constraints by intent on the key elements — pin a nav’s logo Left and its icon Right, stretch a search field, center anything that should stay centered. Then resize the frame wider and narrower and watch: fix every element that drifts or overlaps until the screen holds across the range. Capture a wide and a narrow state side by side.

Second case · a top navigation bar

The same lesson, a different object

Common failures · spot them fast

The failure gallery

Each of these is caught by a quality gate — keep the cheatsheet open while you work.

Worked example

Watch the journey

Cheatsheet

Reflection