Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jpoindexter/grid-and-spacing
Reference-grade system for spacing scales, column/baseline grids, responsive breakpoints, and modern CSS Grid/container-query layout built on an 8pt base with copy-pasteable tokens.
Passed 21 of 22 test cases with the skill, and 18 of 22 without it.
3 fixed18 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
The instructions your model reads when the skill loads.
Spacing and grids are the load-bearing skeleton of a design system. Get them right and every component composes; get them wrong and you fight off-grid drift forever. This is the working reference: numbers, tokens, and CSS you paste.
| Grid | Governs | Granularity | Tool |
|---|---|---|---|
| Soft grid (spacing) | Padding, margins, gaps between everything | 8pt (4pt half-step) | spacing tokens, gap, padding |
| Hard grid (columns) | Page-level horizontal structure: columns, gutters, margins | 12/8/4 columns | CSS Grid grid-template-columns |
| Baseline grid | Vertical rhythm of text across the page | 4pt (line-height multiples) | line-height, margin-block |
The soft grid is always on. The hard grid kicks in at the layout/page level. The baseline grid is the strictest and most often skipped — adopt it only when typographic precision matters (editorial, docs), because forcing every component onto a 4pt baseline is expensive.
pt, Android in dp, web in px/rem. 8 maps cleanly to all three (see Density below).The 4pt half-step. Use 4pt for fine control where 8pt is too coarse: icon-to-label gaps, dense data tables, tight inline chips, compact toolbars. Rule: 8pt for layout and component spacing; 4pt only when 8 visibly over-spaces a small element. Don't go below 4 except for hairline borders (1px) and 2px focus-ring offsets.
A geometric-ish scale on the 8pt grid. This is the canonical set — ship these as tokens, do not invent values between them.
| Token | px @1x | rem | Typical use |
|---|---|---|---|
space-0 | 0 | 0 | reset |
space-px | 1 | — | hairline border |
space-0.5 | 2 | 0.125 | icon nudge, focus offset |
space-1 | 4 | 0.25 | tight inline gap (4pt step) |
space-2 | 8 | 0.5 | base unit, compact padding |
space-3 | 12 | 0.75 | input padding, small gap |
space-4 | 16 | 1 | default component padding/gap |
space-5 | 20 | 1.25 | (optional) |
space-6 | 24 | 1.5 | card padding, section inner gap |
space-8 | 32 | 2 | between components |
space-10 | 40 | 2.5 | small section gap |
test cases passed, vs 18 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.