Grid
The grid is the foundation for positioning elements on-screen. Designing to the grid helps create consistent, easy-to-follow experiences. The Breeze grid system is composed of 12 flexible columns with a gutter of 20px between each column. A margin of 20px either side of the grid is used at all breakpoints — this is optional based on the page layout or component being used. Column sizes available are: 1/1 (full width), 1/2 (half), 1/3 (one third), and 1/4 (one quarter). Mixed column layouts are supported by nesting and mixing different column sizes — for example 2/3 + 1/3, 1/4 + 3/4, or 2/3 with a 1/3 offset. Columns are responsive and automatically change width at certain breakpoints. Breakpoint 1 is at 961px or more, breakpoint 2 is between 960px and 641px, and breakpoint 3 is at 640px or less.
Usage Guidance
When to use
- +Structure page layouts with consistent 12-column grids.
- +Create responsive layouts that adapt across the three breakpoints.
- +Align content sections using standard column sizes (1/1, 1/2, 1/3, 1/4).
- +Combine different column sizes for mixed layouts (e.g. 2/3 + 1/3).
When not to use
- −For component-internal layout — use flexbox utilities instead.
- −For single-column content flows — the grid adds unnecessary complexity.
Examples
Code Samples
Horizontal grid
The base grid uses 12 flexible columns with a 20px gutter (gap-5) between each column. An optional 20px margin (px-5) on either side can be used depending on the page layout or component. In Tailwind, the Breeze 12-column grid maps to: grid grid-cols-12 gap-5.
{/* 12-column base grid with 20px gutters and optional margins */}
<div className="grid grid-cols-12 gap-5 px-5">
<div className="col-span-12">Full width content</div>
</div>Column layouts
The following column sizes can be applied to the grid. Each maps to a col-span value on the 12-column grid: | Column size | Span | Tailwind class | |---|---|---| | 1/1 (full) | 12 columns | col-span-12 | | 1/2 (half) | 6 columns | col-span-6 | | 1/3 (third) | 4 columns | col-span-4 | | 1/4 (quarter) | 3 columns | col-span-3 |
{/* 1/1 — Full width */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-12">Full width</div>
</div>
{/* 1/2 + 1/2 — Two halves */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-6">Half</div>
<div className="col-span-6">Half</div>
</div>
{/* 1/3 + 1/3 + 1/3 — Three thirds */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-4">Third</div>
<div className="col-span-4">Third</div>
<div className="col-span-4">Third</div>
</div>
{/* 1/4 + 1/4 + 1/4 + 1/4 — Four quarters */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-3">Quarter</div>
<div className="col-span-3">Quarter</div>
<div className="col-span-3">Quarter</div>
<div className="col-span-3">Quarter</div>
</div>Mixed column layouts
The grid layout is easily extended by nesting and mixing different column sizes. Common patterns include: | Layout | Spans | Use case | |---|---|---| | 2/3 + 1/3 | col-span-8 + col-span-4 | Main content + sidebar | | 1/4 + 3/4 | col-span-3 + col-span-9 | Narrow nav + wide content | | 2/3 + 1/3 Offset | col-span-8 + col-span-4 col-start-9 | Content with offset sidebar |
{/* 2/3 + 1/3 — Main content + sidebar */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-8">Main content (2/3)</div>
<div className="col-span-4">Sidebar (1/3)</div>
</div>
{/* 1/4 + 3/4 — Narrow nav + wide content */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-3">Nav (1/4)</div>
<div className="col-span-9">Content (3/4)</div>
</div>
{/* 2/3 + 1/3 Offset — Column with gap before it */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-8">Main content (2/3)</div>
<div className="col-span-4 col-start-9">Offset (1/3)</div>
</div>Responsive columns
Columns automatically change width at three breakpoints. Use Tailwind's min-width breakpoints to map to the Breeze responsive system: - Breakpoint 1 (961px+): Use min-[961px]:col-span-* - Breakpoint 2 (641–960px): Use min-[641px]:col-span-* - Breakpoint 3 (≤640px): Default col-span-12 (full width) Note: 1/2 columns stay at 50% at Breakpoint 2 (they don't expand to full width until Breakpoint 3). All other column sizes expand to full width at Breakpoint 2.
{/* 1/3 columns — 3 across at BP1, stack at BP2 and BP3 */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-12 min-[961px]:col-span-4">Card 1</div>
<div className="col-span-12 min-[961px]:col-span-4">Card 2</div>
<div className="col-span-12 min-[961px]:col-span-4">Card 3</div>
</div>
{/* 1/2 columns — 2 across at BP1 and BP2, stack at BP3 */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-12 min-[641px]:col-span-6">Left half</div>
<div className="col-span-12 min-[641px]:col-span-6">Right half</div>
</div>
{/* 2/3 + 1/3 — Side by side at BP1, stack below */}
<div className="grid grid-cols-12 gap-5">
<div className="col-span-12 min-[961px]:col-span-8">Main content</div>
<div className="col-span-12 min-[961px]:col-span-4">Sidebar</div>
</div>Guidelines
Do
- ✓Use the 12-column grid for page-level layout.
- ✓Maintain the 20px gutter between columns at all breakpoints.
- ✓Use the standard column sizes: 1/1, 1/2, 1/3, 1/4.
- ✓Test layouts across all three breakpoints (961px+, 960–641px, 640px or less).
- ✓Use mixed column layouts (2/3 + 1/3, 1/4 + 3/4) for asymmetric content.
Don't
- ✗Don't use arbitrary column widths outside the standard sizes.
- ✗Don't remove the 20px gutter between columns.
- ✗Don't nest grids more than 2 levels deep.
- ✗Don't ignore the responsive breakpoints — all layouts should collapse gracefully.