Grid System
Responsive 12-column grid layout system with breakpoints, offsets, and nesting.
Equal Columns
Auto-equal width columns.
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
1
1
1
1
1
1
1
1
1
1
1
1
Column Spans
Columns spanning different widths in a 12-column grid.
col-12
col-6
col-6
col-4
col-8
col-3
col-9
col-3
col-6
col-3
col-2
col-8
col-2
col-4
col-4
col-4
col-2
col-2
col-2
col-2
col-2
col-2
Responsive Breakpoints
Columns that stack on mobile and go horizontal on larger screens.
col-12 md:col-6
col-12 md:col-6
col-12 sm:col-6 lg:col-3
col-12 sm:col-6 lg:col-3
col-12 sm:col-6 lg:col-3
col-12 sm:col-6 lg:col-3
Responsive
Responsive
Responsive
Responsive
Responsive
Responsive
Offset Columns
Columns with left margin offsets.
offset-3 col-6
offset-2 col-4
offset-2 col-4
offset-6 col-6
Nested Grid
Grid inside a grid column.
col-8 (parent)
Nested 1/2
Nested 1/2
col-4
Gap Sizes
Different gap/gutter widths between columns.
No Gap (gap-0)
Col
Col
Col
Col
Small Gap (gap-1)
Col
Col
Col
Col
Medium Gap (gap-3)
Col
Col
Col
Col
Large Gap (gap-6)
Col
Col
Col
Col
Alignment
Vertical and horizontal alignment of grid items.
Items Start (top)
Short
Tall
Short
Items Center
Short
Tall
Short
Items End (bottom)
Short
Tall
Short
Order
Visual reordering independent of source order.
First in source → order-3
Second in source → order-1
Third in source → order-2