Amanoba Logo
Back to Course

Grids That Survive Scale

Day 11 of 30 · The Playbook 2026 – Masterclass for Designers

Build a fixed + fluid grid that survives varied content and breakpoints.

Learning Goal

  • Define grid type (12 columns, 8/12/16 modules, container max-width).
  • Handle breakpoints (xs–xl) with consistent rules.
  • Create layout tokens (gap, gutter, margin).
  • Document examples (card grid, form, dashboard).
  • Apply to all courses consistently.
  • Ensure quizzes keep the same layout logic.

Why This Matters

  • Without grid, rhythm breaks.
  • Scalability: new modules and breakpoints stay predictable.
  • Dev speed: known container/gap rules.

Explanation

  • Container: 1200–1440px max width, centered, 24px padding.
  • Columns: 12 cols, gutter 16–24px.
  • Breakpoints: xs 360, sm 640, md 768, lg 1024, xl 1280, 2xl 1440.
  • Gap tokens: gap.xs=8, sm=12, md=16, lg=24.

Examples

Bad: Every page with different max-width and random gaps.

Good: 12-col grid, unified gutters, consistent breakpoints.

Guided Exercise (10–15 minutes)

  1. Set container/grid params (columns, gutter, margin).
  2. Define breakpoints and gap tokens.
  3. Create two examples: card grid + form on this grid.

Independent Exercise (5–10 minutes)

Document the grid in the Playbook with links to Figma/Storybook examples.

Self-Check

  • Container, columns, gutter, breakpoints defined.
  • Gap tokens listed.
  • Examples documented.

Optional Deepening