Grids That Survive Scale

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

• Bootstrap grid: https://getbootstrap.com/docs/5.3/layout/grid/
• Utopia fluid layouts: https://utopia.fyi