Grid Systems

Structure layouts with mathematical grids for consistency and visual harmony.

Category: Design | Type: Skills

Skills: Layout, Grid Design, Spatial Systems

Prompt

Grids are the skeleton of layout. Framework: 1. Column Grid — divide [your layout] into 4, 8, or 12 columns with gutters. Content snaps to column boundaries. 2. Baseline Grid — align all text to a consistent vertical rhythm (typically 4px or 8px increments). 3. Modular Grid — combine columns and rows to create rectangular modules. Each module holds one content unit. 4. The 8px Grid — use multiples of 8 for all spacing: margins, padding, gaps. This scales cleanly across devices. 5. Breaking the Grid — intentional grid breaks create emphasis. The rule must exist before it can be broken meaningfully. 6. Responsive Grids — define breakpoints where the column count changes (12 → 8 → 4 → 1). The grid is not a cage. It is a framework that makes creative decisions easier by constraining the trivial ones.

Browse all prompts at Ask Wisely