Spacing
8px grid system and gap utilities
Spacing Scale
StockFind uses an 8px base grid for all spacing. Use even numbers for consistency.
gap-28pxgap-416pxgap-624pxgap-832pxgap-1248pxRules
Spacing Rules
These rules are enforced throughout the codebase.
Do
// ✓ Use gap-* with flex/grid
<div className="flex flex-col gap-4">
<Item />
<Item />
</div>
// ✓ Use gap-* with even numbers
<div className="flex gap-2">...</div>
<div className="flex gap-4">...</div>
<div className="flex gap-6">...</div>Don't
// ✗ Avoid space-y-*
<div className="space-y-4"> {/* Don't use */}
<Item />
<Item />
</div>
// ✗ Never use margin-top
<div className="mt-4">...</div> {/* Don't use */}
// ✗ Avoid absolute/relative positioning
<div className="relative">
<div className="absolute top-0">...</div> {/* Don't use */}
</div>Layout Patterns
Flexbox with Gap
// Horizontal layout
<div className="flex items-center gap-4">
<Icon />
<span>Label</span>
</div>
// Vertical layout
<div className="flex flex-col gap-4">
<Header />
<Content />
<Footer />
</div>Grid with Gap
<div className="grid grid-cols-3 gap-6">
<Card />
<Card />
<Card />
</div>Spacing Reference
| Token | Value | Tailwind | Usage |
|---|---|---|---|
| 2 | 8px | gap-2, p-2 | Tight spacing, inline elements |
| 4 | 16px | gap-4, p-4 | Default spacing |
| 6 | 24px | gap-6, p-6 | Section spacing |
| 8 | 32px | gap-8, p-8 | Large sections |
| 12 | 48px | gap-12, p-12 | Page sections |