Briefle words · UI design
Layout grid / content edge
A fixed set of margins and columns that every element snaps to, instead of positioning each one by eye.
Say it to an AI
Checkout order summary card. Heading, line items, total and the Pay button all snap to one content edge, a single 24px inset on both sides, so every left and right edge lines up exactly. Right-align prices with tabular figures so the decimals stack.
How an expert would brief the stronger version of “Checkout summary”.
See it
Try it as a puzzle →Order summary card on the checkout page of a clothing store.
Why: A uses one 24px inset on both sides of the card for everything. B mixes 18, 20, 22, 24 and 26px.
Related words
Room 5 · Spacing & layout
Learn “Layout grid / content edge” in a five-minute lesson