Layout and Grid
Put two LunchLoop screens side by side and something feels off. The Today card sits 14 px from the screen edge, the week list 18 px. Gaps between items are 10, 12 and 15 px, chosen by eye on different days. Nobody can name the problem, but everybody feels it. A layout system turns "feels off" into something you can check.
The rule
Align to a grid, space in steps, and group what belongs together.
The grid. A layout grid has columns, gutters (the gaps between columns) and margins (the space at the screen's edges). Phones commonly use 4 columns, tablets 8 and desktops 12. Elements start and end on column lines, so edges line up across the whole screen and across screens.
The spacing scale. Instead of choosing each gap by eye, pick a set of steps and use only those. Most teams use multiples of 4 or 8: 4, 8, 12, 16, 24, 32, 48. Every margin, padding and gap comes from the scale.
Proximity. People read things that sit close together as related, and things further apart as separate. Space does the grouping, often better than boxes and lines do.
Alignment. Fewer alignment lines make a calmer screen. Left-align text in lists, and avoid centring long passages.
Touch targets. Anything tappable needs room for a thumb. Platform guidelines suggest roughly 44 to 48 px as a minimum height and width for tap areas.
The shortcut
Space inside a group must be smaller than space between groups. Use a small step inside a card and a bigger step between cards. If the gap inside equals the gap outside, the grouping disappears and the eye cannot tell where one item ends.
Set the frame
A 4-column grid with 16 px side margins and 16 px gutters on phones.
A grid is a guide, not a cage. A full-width photo or banner can break out of the columns on purpose, and that is fine when it is a choice. What the grid prevents is the accidental 14 px on one screen and 18 px on the next.
Drills
Answer fast — trust the rule.
Inside each meal card the items are 16 px apart, and the cards are also 16 px apart. What happens?
Which of these is a consistent spacing scale?
In a layout grid, what is a gutter?
The Change button is 28 px tall on a phone. Why is that a problem?
Remember
- Align to a grid, space in steps, and group what belongs together.
- Shortcut: space inside a group must be smaller than space between groups.
- Trap: gaps chosen by eye, and tap targets too small for a thumb.