Layout & Spacing

Good layout is the invisible framework that makes a design feel polished. When spacing and alignment are consistent, the interface feels trustworthy and professional.

The Box Model Mindset

Every UI element is a box. Understanding how boxes relate to each other is the foundation of layout:

• Margin — Space outside the box (between elements)
• Padding — Space inside the box (around content)
• Border — The edge of the box

Spacing Scale

Use a consistent spacing scale based on a base unit:

/* 4px base unit */
--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-12: 3rem;    /* 48px */
--space-16: 4rem;    /* 64px */

Layout Patterns

1. The Container

Every page needs a max-width container:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

2. Grid Layouts

CSS Grid is your best friend for page layouts:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

3. Content Width

Different content types need different max-widths:

Alignment Rules

1. Left-align text — Don't center body text
2. Consistent gutters — Use the same gap everywhere
3. Visual weight — Heavier elements need more surrounding space
4. Proximity — Related items closer together, unrelated items further apart

Exercise

• Define a spacing scale (base 4px or 8px)
• Set up a responsive container component
• Build a card grid that adapts to screen size
• Limit your prose width to 720px max
• Review the proximity principle in your layout

Key Takeaway

Spacing is not decoration — it's communication. Consistent, intentional spacing tells users what belongs together and what doesn't. Master the 8px grid and you're 80% of the way there.