Grid

12-column responsive grid with consistent gutters. Provides consistent structure across all screen sizes and contexts.

Grid System

Grid visible (4px)

Card Title

All padding, margins, and sizes are multiples of 4px. This ensures perfect alignment.

Note: All elements snap to the 4px baseline grid. Toggle the grid to verify alignment.

12-column flexible layout with 24px gutters and 1280px max width. Margins adapt from 16px (mobile) to 48px (desktop).

Breakpoints

Responsive grid adapts across devices:

  • Mobile (< 640px): 4 columns, 16px margins/gutters
  • Tablet (640-1024px): 8 columns, 24px margins/gutters
  • Desktop (> 1024px): 12 columns, 48px margins, 24px gutters

Column Spans

12 columns (full width)

6 columns (half)

6 columns (half)

4 columns (third)

4 columns (third)

4 columns (third)

3 cols

3 cols

3 cols

3 cols

8 columns (main content)

4 columns (sidebar)

Language Adaptation

Grid gutters multiply by language density:

  • Consumer (1.75x): 24px → 42px - Generous spacing for browsing
  • Merchant (0.875x): 24px → 21px - Compact for information density
  • Courier (1.5x): 24px → 36px - Spacious for glanceable content

Best Practices

Alignment

  • Align content to grid columns
  • Use gutters consistently
  • Respect margins at page edges

Flexibility

  • Allow grid to adapt at breakpoints
  • Don't force rigid column counts
  • Let content determine layout needs

Consistency

  • Use same gutters throughout
  • Maintain vertical rhythm
  • Keep margins proportional

Was this page helpful?