swiss-grid-system

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.