| name | swiss-grid-system |
| description | Use when establishing a precise layout grid. Swiss/International style uses 12-col grid with strict adherence; every element snaps to grid.
|
Swiss Grid System
Swiss grid: 12-column desktop, strict adherence. Eliminates 'kinda-aligned' layout. The grid is the design.
12-column desktop grid
Container: 1200px max-width, centered
Columns: 12 equal columns with 24-32px gutter
Margins: 32-48px outside columns
All elements snap to column starts. Headers, body, images, callouts — everything aligns to a column edge.
4-column mobile grid
Container: 100% width minus 32px padding
Columns: 4 equal columns
Gutter: 12-16px
Margins: 16px outside
Mobile is more constrained; many elements span full width.
Snapping discipline
Don't:
- Eyeball 'almost aligned'
- Use arbitrary 23% widths
- Center things that should align left
Do:
- Use Tailwind
col-span-4 notation
- Define container queries for breakpoint shifts
- Check alignment with browser DevTools grid overlay
Where this fits in the X3 empire
Foundation grid for CardPrepAI layouts.
