Page layout
Arrange navigation, content, and actions around the task.
Why this matters
Layout shows what matters. Say someone opens your detail page: do they see the decision first, or a wall of metadata? Start with what they need to read, compare, or do — then pick regions that serve that job.
What to understand
Related pages should feel like family without sharing one identical frame. Line up headings, content, controls, and dividers on purpose. Keep related things closer than unrelated ones. Reach for whitespace and alignment before borders.
Let density follow the job. A comparison table wants tight rows; an unfamiliar decision wants air and nearby explanation. More whitespace isn't automatically better. A card should mean something — a real object or region — not wrap every paragraph.
Watch for
- Giving side metadata equal weight to identity and next action.
- Fake metric cards filling a template instead of decisions needing attention.
- Decoration crowding a form or setup flow.
- One wide child forcing page-level sideways scroll.
- A sticky header covering a focused control or jumped-to heading.
- Clipping the whole page instead of fixing who owns sizing and gutters.
Strong default
One plain document scroll when it does the job. Local scroll for genuinely wide data. Whitespace and alignment before borders. A card only for a real object or region.
When this doesn't apply
Related pages don't need one identical frame, and more whitespace isn't automatically better. Nested scroll suits a workspace; a plain document suits reading. New colors and radii can't fix a structure problem — regroup and reorder instead.
In practice
| Surface | Give space to | Common mistake |
|---|---|---|
| Guide or article | Reading flow, headings, examples, links. | Cluttering every edge with navigation. |
| Working dashboard | Decisions and exceptions needing attention. | Fake metric cards filling a template. |
| Detail page | Identity, key facts, next action. | Giving side metadata equal weight. |
| Form or setup flow | Instructions, inputs, consequences, recovery. | Decoration crowding the task. |
| Marketing page | Real value, proof, clear next step. | Feature cards with no story. |
Say your page suddenly scrolls sideways on small screens. Usually the culprit: grid and flex children refuse to shrink past their content's natural width, so a long URL, code block, or table blows the page open.
.workspace {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
}
.workspace-main {
min-width: 0;
}
@media (max-width: 50rem) {
.workspace {
grid-template-columns: minmax(0, 1fr);
}
}The sidebar still needs a real small-screen pattern; this snippet only fixes the sizing deal. When the task needs side-by-side comparison, give wide data its own scroll region.
Ask your agent: "find every flex or grid child that can force sideways scroll."
Decide what scrolls and what stays. A sticky header must never cover a focused control or a heading you just jumped to. Nested scroll can suit a workspace, but one plain document scroll is clearer when it does the job.
When navigation or overlays change, compare sticky regions at one fixed window size. A scrollbar appearing shouldn't shove the reading column sideways. Fix who owns sizing and gutters instead of clipping the whole page.
When small tweaks stop helping, change the structure. Important content squeezed beside a useless rail? Resize the regions or move the rail. Every section shouting equally? Regroup and reorder. New colors and radii can't fix those problems.
Verify
Sideways scroll at narrow, middle, and wide widths. Sticky regions at one fixed window size with navigation and overlays changing. Focused controls and jumped-to headings staying visible below sticky headers.
Related skills
Use $layout for shells and $hierarchy for ranking content. Interface craft ties structure to type and character; responsive design tests it as space changes.
Last updated on