Layout
Grid System
Grid structure and responsive layouts
Production
A flexible 12-column grid system built on Tailwind CSS grid utilities.
Grid Structure
| Property | Value | Tailwind |
|---|---|---|
| Columns | 12 | grid-cols-12 |
| Gutter | 24px | gap-6 |
| Container | Centered | container mx-auto px-6 |
Column Spans
| Span | Columns | Tailwind | Common Uses |
|---|---|---|---|
| Full | 12/12 | col-span-12 | - |
| Half | 6/12 | col-span-6 | - |
| Third | 4/12 | col-span-4 | - |
| Quarter | 3/12 | col-span-3 | - |
| Two Thirds | 8/12 | col-span-8 | - |
| Three Quarters | 9/12 | col-span-9 | - |
Common Layouts
Content + Sidebar
<div class="grid grid-cols-12 gap-6">
<main class="col-span-12 lg:col-span-8">Content</main>
<aside class="col-span-12 lg:col-span-4">Sidebar</aside>
</div>
Three Columns
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
Form Layout
<div class="grid grid-cols-12 gap-6">
<label class="col-span-12 lg:col-span-3">Label</label>
<input class="col-span-12 lg:col-span-6" />
<span class="col-span-12 lg:col-span-3">Help text</span>
</div>
Container
Use the Tailwind container utility with responsive max-widths:
<!-- Basic centered container -->
<div class="container mx-auto px-6">Content</div>
<!-- With max-width constraint -->
<div class="mx-auto max-w-screen-xl px-6">Content</div>
| Breakpoint | Container Max | Tailwind |
|---|---|---|
| sm (640px) | 640px | max-w-screen-sm |
| md (768px) | 768px | max-w-screen-md |
| lg (1024px) | 1024px | max-w-screen-lg |
| xl (1280px) | 1280px | max-w-screen-xl |
| 2xl (1536px) | 1536px | max-w-screen-2xl |
Best Practices
- Start mobile-first: Design for small screens, then expand with
sm:,md:,lg:prefixes - Use consistent gutters: Stick to
gap-6as the default grid gap - Align to grid: Content should align to column edges
- Allow breathing room: Don't fill every column; use white space
- Test breakpoints: Ensure layouts work at all breakpoint boundaries