Layout and Composition

Build structured, visually compelling layouts using modern CSS.

Prerequisites

• Read .agents/design-context.md (see design-context) for Spacing System (4px/8px base), Border Radius, style archetype, and platform priority. Spacing tokens below follow the design-system scale (--space-N = N × 4px); colors use the shared --brand-* / --gray-* primitives from color-palette.
• Identify the content types (text-heavy, media-heavy, dashboard, marketing) to choose the right patterns.

Step 1: CSS Grid Patterns

12-Column Grid