Columns 1–8 · 8 columns
Feature content
This wider box is useful for a primary article, introduction, or featured image.
The structure
Every column stays visible
The guide below shows all 12 columns. The spaces between them are gutters, and the space outside the guide is the container margin.
12 equal columns
123456
789101112
The examples
Sample content widths
Each box begins and ends on a grid line. Resize the browser below 1440px to see the same arrangement shrink fluidly.
Columns 1–6 · 6 columns
Half-width panel
Six of twelve columns create a balanced half-width layout.
Columns 7–12 · 6 columns
Half-width panel
Its width matches the neighboring panel while the grid keeps the gutters consistent.
Columns 1–4 · 4 columns
One-third
A four-column content box.
Columns 5–8 · 4 columns
One-third
Another four-column content box.
Columns 9–12 · 4 columns
One-third
The final four-column content box.
The rules
How this grid works
- Maximum width: the container stops growing at 1440px.
- Fluid width: the container uses a percentage width below that maximum.
- Fixed arrangement: all content remains in the same 12-column layout at every size.