layout-spatial-structure

The Grid Is the Architecture — Everything Else Is Decoration

Every professional layout is built on a grid. The grid is not a suggestion — it is the structural skeleton that makes alignment effortless, spacing predictable, and responsive behavior automatic. Material Design, Bootstrap, and every major design system converge on the same fundamentals: a 12-column grid with an 8-point spacing system.

12-Column Grid Anatomy

Component	Purpose	Typical Value
Columns	Content containers; 12 divides evenly by 2, 3, 4, 6	12 columns
Gutters	Space between columns; consistent rhythm	16px–32px (24px default)
Margins	Outer breathing room on left/right edges	16px mobile, 24px tablet, auto-center desktop
Container	Max-width wrapper preventing ultra-wide lines	1200px–1440px

Grid adherence rule: >90% of element edges must align to grid lines. Audit by overlaying a 12-column grid on any screen — misaligned elements are immediately visible.

CSS Grid vs Flexbox Decision Table

Use Case	Choose	Reason
Page-level layout (header, sidebar, main, footer)	CSS Grid	Two-dimensional control over rows and columns
Card grids with uniform items	CSS Grid	auto-fit/auto-fill with minmax() handles responsiveness
Navigation bars, button groups	Flexbox	One-dimensional alignment with wrapping
Centering a single element	Flexbox	justify-content + align-items in three lines
Overlapping elements or complex placement	CSS Grid	Named grid areas and explicit row/column placement
Unknown number of items in a row	Flexbox	flex-wrap distributes naturally

Default rule: Start with CSS Grid for layout, drop to Flexbox for component-level alignment.

Spacing System

Use the constrained 4px/8px spacing scale defined in the whitespace-density skill. All grid gutters, margins, and padding must come from that scale. Never use arbitrary spacing values.

Gestalt Proximity in Layouts

Apply the Gestalt proximity rule (see whitespace-density skill for the full ≤50% rule and spacing tokens) to all layout decisions. Internal spacing within a grid region must be visibly tighter than spacing between regions.

Card Layout Patterns

Use CSS Grid auto-fit with minmax() for responsive card grids (see responsive-design skill for fluid grid techniques).

Minimum card width: 280px for content cards, 200px for thumbnail cards. Set gap using the spacing scale.

Scanning Patterns

Place layout regions to support natural eye scanning. See the visual-hierarchy skill for F-pattern and Z-pattern rules — layout determines where regions go, hierarchy determines what draws attention within them.

Anti-Patterns

Anti-Pattern	Why It Fails	Fix
Random widths (347px, 513px)	No grid alignment; looks accidental	Snap to column spans or percentages
Mixing grid systems (12-col + 10-col)	Conflicting rhythms; nothing aligns	One grid system per project
Equal internal and external spacing	Groups are indistinguishable; flat hierarchy	Apply Gestalt proximity rule (see whitespace-density skill)
Hardcoded pixel widths on responsive layouts	Breaks on every viewport	Use fr, %, minmax(), or container queries
Nesting grids more than 2 levels deep	Compounding gutters create unpredictable spacing	Flatten structure; use subgrid

Cross-Media Notes

• Presentations: Establish slide margins (10% of slide width). Align all text and images to a 2-column or 3-column invisible grid. Consistent placement across slides creates professionalism.
• CVs/Resumes: Use a clear 2-column layout (sidebar + main) or single-column with consistent left alignment. Section spacing should follow the proximity rule — related items grouped tightly.
• Dashboards: Use a 12-column grid with card-based widgets. Each widget snaps to column spans (3, 4, 6, or 12 columns). Maintain consistent gutter width.

Examples

Working implementations in examples/:

• examples/grid-and-card-layout.md — Complete 12-column grid setup, responsive card grid with CSS Grid auto-fit, Tailwind configuration, and React component

Review Checklist

When reviewing or building layouts:

• Page uses a 12-column grid (or documented alternative) with consistent gutters
• Container has a max-width (1200px–1440px) and is centered
• All spacing values come from the spacing scale (see whitespace-density skill)
• CSS Grid used for page layout; Flexbox used for component-level alignment
• Card grids use auto-fit/auto-fill with minmax() for responsive reflow
• >90% of element edges align to grid lines
• Gestalt proximity rule applied (see whitespace-density skill)
• No hardcoded pixel widths on elements that must be responsive
• Mobile layouts collapse to single column with maintained spacing scale