Layout is how you arrange elements on a page. Good layout guides the user's eye, creates order, and makes content easy to scan. Bad layout makes everything feel chaotic.
Visual Hierarchy
Visual hierarchy controls what people see first, second, and third. You create hierarchy through:
Size
Bigger elements get noticed first.
┌──────────────────────────────┐
│ HUGE HEADLINE │ ← Seen first
│ Medium subheading │ ← Seen second
│ Small body text that │ ← Seen third
│ provides the details. │
└──────────────────────────────┘Color and Contrast
High contrast draws the eye. A bright button on a neutral page stands out immediately.
┌──────────────────────────────┐
│ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ │
│ ○ ○ ○ ○ ● ○ ○ ○ ○ ○ ○ ○ │ ← Your eye goes here
│ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ │
└──────────────────────────────┘Weight
Bold text, thick borders, and filled shapes carry more visual weight than thin, light elements.
Position
Elements at the top and left get more attention in left-to-right languages.
Reading Patterns
Users don't read web pages — they scan. Two common patterns:
F-Pattern
Users scan in an F-shape on text-heavy pages:
████████████████████
████████████████████
██████████
████████████████
████████████████
██████
████████████
████████████
███First they scan across the top, then down the left side, with shorter scans to the right. Put important content at the top and along the left edge.
Z-Pattern
Users follow a Z-shape on pages with less text (landing pages, marketing):
1 ─────────────── 2
╱
╱
╱
3 ─────────────── 4Logo (1) → Navigation (2) → Hero content (3) → CTA button (4).
Grid Systems
Grids bring structure and consistency to layouts.
The 12-Column Grid
The most common web grid divides the page into 12 columns. 12 is flexible — it divides evenly into halves, thirds, quarters, and sixths.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 4 cols | 8 cols | Sidebar + Content
| 3 | 3 | 3 | 3 | 4 cards
| 6 cols | 6 cols | Two columns
| 12 cols | Full widthGrid Terminology
| Term | Meaning |
|---|---|
| Columns | Vertical divisions of the layout |
| Gutters | Space between columns (usually 16-32px) |
| Margins | Space on the sides of the grid |
| Breakpoints | Screen widths where the grid changes |
CSS Grid in Practice
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Full width */
.full { grid-column: span 12; }
/* Two columns */
.half { grid-column: span 6; }
/* Sidebar layout */
.sidebar { grid-column: span 4; }
.content { grid-column: span 8; }
/* Responsive */
@media (max-width: 768px) {
.half, .sidebar, .content {
grid-column: span 12;
}
}Whitespace
Whitespace (negative space) is the empty space between elements. It's not wasted space — it's one of the most powerful design tools.
What Whitespace Does
- Groups related items — elements close together feel related
- Separates sections — space between groups creates visual boundaries
- Creates breathing room — prevents the page from feeling cramped
- Directs attention — isolated elements stand out
Common Mistake
Developers tend to pack elements tightly to "use the space." This makes everything harder to read.
Bad (cramped):
┌──────────────────────────────┐
│Title │
│Description text here that │
│goes on and on without breaks │
│[Button][Button][Link][Link] │
│Image Image Image Image │
└──────────────────────────────┘
Good (breathing room):
┌──────────────────────────────┐
│ │
│ Title │
│ │
│ Description text here that │
│ provides clear details. │
│ │
│ [Button] [Link] │
│ │
└──────────────────────────────┘Spacing Scale
Use a consistent spacing scale instead of random values:
4px — tight (between icon and label)
8px — small (between related items)
16px — medium (between form fields)
24px — large (between sections)
32px — extra large (between major areas)
48px — huge (page sections)
64px — massive (hero areas)Stick to multiples of 4 or 8. This creates rhythm and consistency.
Alignment
Align everything to something. Misaligned elements look sloppy even if you can't articulate why.
The Invisible Line Rule
Draw invisible vertical and horizontal lines through your layout. Every element should sit on one of these lines.
Good (aligned): Bad (misaligned):
│ │
│ Heading Heading
│ Paragraph text │ Paragraph text
│ [Button] │ [Button]
│ ───────────── │ ─────────
│ Another section │ Another section
│ More text │ More textLeft vs Center Alignment
| Alignment | Use For |
|---|---|
| Left-aligned | Body text, forms, lists, navigation |
| Center-aligned | Headlines, CTAs, hero sections, short text |
| Right-aligned | Numbers in tables, prices, dates |
Never center long paragraphs. Center alignment is for short, impactful text only.
Proximity
The law of proximity: elements close together are perceived as a group.
Related (grouped): Unrelated (separated):
Name ___________ Name ___________
Email __________
─────────────────
─────────────────
Email __________
Address _________
City ____________ Address _________
City ____________In the first layout, Name and Email feel like one group, Address and City like another. Use spacing to communicate relationships.
Common Layout Patterns
| Pattern | Structure | Best For |
|---|---|---|
| Single column | One centered column | Blog posts, articles |
| Two column | Sidebar + content | Documentation, dashboards |
| Three column | Equal or weighted thirds | Product listings |
| Card grid | Grid of equal cards | Portfolios, course lists |
| Split screen | 50/50 or 40/60 split | Landing pages, comparisons |
| Full-width sections | Stacked full-width blocks | Marketing pages |
Summary
- Visual hierarchy guides the eye through size, contrast, weight, and position
- Users scan in F-patterns (text) and Z-patterns (landing pages)
- Use a 12-column grid for consistent, flexible layouts
- Whitespace is a design tool — use generous spacing with a consistent scale
- Align everything to invisible lines — misalignment looks unprofessional
- Group related elements with proximity, separate unrelated ones with space