Grid System
A powerful flexbox-based grid system for layouts.
The 12-column grid is the foundation of Axis Twelve.
Column Classes
Define column widths using 12-column fractions.
.col-1
1/12 (8.33%)
.col-2
2/12 (16.67%)
.col-3
3/12 (25%)
.col-4
4/12 (33.33%)
.col-5
5/12 (41.67%)
.col-6
6/12 (50%)
.col-7
7/12 (58.33%)
.col-8
8/12 (66.67%)
.col-9
9/12 (75%)
.col-10
10/12 (83.33%)
.col-11
11/12 (91.67%)
.col-12
12/12 (100%)
Basic Grid
Create a grid with the .grid class and add columns.
.grid
Grid container
View Example
html
<div class="grid">
<div class="col-4">1/3 width</div>
<div class="col-4">1/3 width</div>
<div class="col-4">1/3 width</div>
</div>Common Layouts
Pre-configured layout patterns.
2-Column Equal
Two equal-width columns
View Example
html
<div class="grid gap-md">
<div class="col-6">Left</div>
<div class="col-6">Right</div>
</div>3-Column Equal
Three equal-width columns
View Example
html
<div class="grid gap-md">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>