A grid gives pages a shared alignment spine

What it is

Move from home to settings to a detail view. If titles, lists and the primary button start a few pixels further in each time, the eye has to re-lock onto where content begins. A layout grid is doing its real job here: not tidying a single mock, but handing the product one shared x-coordinate — an alignment datum. Across those screens, the main column should still start on the same track.

Page-by-page review misses this. Each screen looks internally aligned; stacked, the main column jitters.

Why it happens

People store a recurring left edge as a spatial anchor. When the next screen moves that anchor, they spend a fixation re-acquiring it before reading. Cheap once; on a high-frequency path it adds up to a product that feels loosely assembled.

The grid writes margin, column start and gutter into one coordinate system, which pins the anchor. That is cross-screen position memory. It does not decide how many columns a module should span, and it does not require empty tracks to be filled.

The usual leak is local padding: one surface starts at 16, another tacks on extra inset after the app bar or a sidebar, and a single navigation now has three different content origins.

Where it stops holding

Single-screen tools, games that redraw the whole frame, or immersive galleries never asked for a cross-page anchor. Marketing pages that change composition per fold may want the jitter. The claim bites on multi-surface tools — settings, forms, lists, details — that share one chrome.

After rotation the column count may change. Keep “still on a grid line,” not “the same pixel x as portrait.” Locking the pixel when the track count changed will shove content into the unsafe edge.

Applying it

• Name one primary content edge (and a right edge if you need one). Lists, forms, titles and the main button sit on it. Secondary modules may occupy other columns; they do not get a private origin.
• Fold top bar, bottom bar and sidebar width into the grid instead of padding the content well after the chrome is built.
• How to check: at one device width, screenshot home, list and detail. Overlay them semi-transparent. If the main-column left edge drifts by more than one gutter, record which page’s padding or safe-area math shoved it.

Related

• Same group: F2.01.2 Column count sets which proportions you can even express · F2.01.3 A grid constrains edges; it does not demand occupancy
• Nearby: F2.02 Columns, gutters and margins · F2.05 Alignment · F1.06 Positional stability of frequent actions
• Search terms: layout grid · alignment datum · gutters · shared column edge