7. Layout & The 8pt Grid System
The Mathematics of Spacing
Have you ever looked at a design and felt like it was just 'off,' but you couldn't figure out exactly why? The spacing was probably inconsistent. Professional UI engineering relies on strict mathematical rules to create an invisible visual rhythm. The 8pt Grid System solves this forever.
📐 The 8pt Rule
The golden rule is simple: Every margin, padding, and element dimension must be a mathematical multiple of 8.
Valid spacing values: 8, 16, 24, 32, 40, 48, 64, etc. (For extremely tight, data-heavy dashboards, a 4pt half-step is permitted).
🤔 Why the Number 8?
Screen resolutions (720p, 1080p, 4K) and mobile device dimensions are overwhelmingly divisible by 8. When designs scale up or down across different screen densities (like @1x to @2x retina displays), using base-8 measurements ensures your design scales perfectly without rendering half-pixels.
📦 The 12-Column Container
Beyond component spacing, entire pages are built on columns. The standard modern web layout uses a 12-column grid. Because 12 is cleanly divisible by 1, 2, 3, 4, and 6, it offers massive layout flexibility (e.g., three cards spanning 4 columns each).
In the Sandbox, you will find a broken dashboard suffering from arbitrary, sloppy spacing. Your mission is to audit the layout. Inspect the padding and margins of the elements. You must adjust any arbitrary values (like 13px or 5px) up or down to the nearest multiple of 8 to lock the interface into a strict mathematical rhythm.
Configure the 12-Column Grid
The canonical web grid: 12 columns, 8px gutter, 16px margin.
Knowledge Check
Ready to test your understanding of 7. Layout & The 8pt Grid System?