Grid System
Flexbox-based responsive grid with percentage and fraction columns
Overview
Pure Admin uses a custom flexbox grid system with intuitive naming. Columns use .pa-col-{size} for percentages
and .pa-col-{x}-{y} for fractions.
Key Features
- Gutter: 0.8rem (8px) per side, 1.6rem (16px) total gap
- Percentage columns: 5% increments (5, 10, 15... 100)
- Fraction columns: Halves, thirds, quarters, fifths, sixths, twelfths
- Responsive: All columns have breakpoint variants
- Offsets: Left margin in 5% increments
Breakpoints
| Prefix | Min Width | Example |
|---|---|---|
sm | 576px | .pa-col-sm-50 |
md | 768px | .pa-col-md-50 |
lg | 992px | .pa-col-lg-50 |
xl | 1200px | .pa-col-xl-50 |
Basic Usage
Auto-equal width columns with .pa-col
Two Equal Columns
.pa-col
.pa-col
Three Equal Columns
.pa-col
.pa-col
.pa-col
Four Equal Columns
.pa-col
.pa-col
.pa-col
.pa-col
Auto Width Column
.pa-col (fills remaining)
.pa-col-auto (content width)
Percentage Columns
Fixed widths in 5% increments: .pa-col-5 through .pa-col-100
.pa-col-25
.pa-col-75
.pa-col-1-3
.pa-col-2-3
.pa-col-50
.pa-col-50
.pa-col-40
.pa-col-60
20
20
20
20
20
.pa-col-100 (full width)
Available percentages: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100
Fraction Columns
Intuitive naming for common layouts: .pa-col-1-3, .pa-col-2-3, etc.
Halves (1/2)
.pa-col-1-2 (50%)
.pa-col-1-2 (50%)
Thirds (1/3, 2/3)
.pa-col-1-3 (33.3%)
.pa-col-2-3 (66.7%)
1/3
1/3
1/3
Quarters (1/4, 3/4)
.pa-col-1-4 (25%)
.pa-col-3-4 (75%)
1/4
1/4
1/4
1/4
Fifths (1/5, 2/5, 3/5, 4/5)
1/5
4/5
2/5
3/5
Sixths (1/6, 5/6)
1/6
5/6
1/6
1/6
1/6
1/6
1/6
1/6
Twelfths (1/12, 5/12, 7/12, 11/12)
1/12
11/12
5/12
7/12
Responsive Grid
Stack on mobile, columns on larger screens. Resize your browser to see the effect.
Mobile-First Pattern
Full width on mobile, 50% on medium screens and up:
.pa-col-100 .pa-col-md-50
.pa-col-100 .pa-col-md-50
Progressive Columns
Different layouts at each breakpoint:
100% → 50% → 25%
100% → 50% → 25%
100% → 50% → 25%
100% → 50% → 25%
Responsive Fractions
Fractions also support breakpoints:
.pa-col-100 .pa-col-md-1-3
.pa-col-100 .pa-col-md-2-3
Offsets
Push columns with left margin: .pa-offset-{size}
Centering with Offsets
.pa-col-50 .pa-offset-25
.pa-col-1-3 .pa-offset-33
Asymmetric Layouts
.pa-col-30 .pa-offset-10
.pa-col-40 .pa-offset-10
Responsive Offsets
.pa-col-100 .pa-col-md-50 .pa-offset-md-25
Full width mobile, centered on desktop
Full width mobile, centered on desktop
Row Alignment
Control horizontal and vertical alignment of columns
Horizontal Alignment
.pa-row--center
Centered
.pa-row--end
Right aligned
.pa-row--between
Left
Right
.pa-row--around
A
B
C
Vertical Alignment
.pa-row--top
Top
Top
.pa-row--middle
Middle
Middle
.pa-row--bottom
Bottom
Bottom
No Gutter
Remove spacing between columns with .pa-row--no-gutter
Default (with gutter)
1/3
1/3
1/3
No Gutter
1/3
1/3
1/3
Visibility Utilities
Show/hide elements at different breakpoints
| Class | Description |
|---|---|
.pa-hide | Always hidden |
.pa-show | Always visible |
.pa-hide-{bp} | Hidden at breakpoint and up |
.pa-show-{bp} | Visible at breakpoint and up |
.pa-hide-below-{bp} | Hidden below breakpoint |
.pa-show-below-{bp} | Visible below breakpoint |
Live Demo (resize browser)
Nested Grids
Grids can be nested inside columns
1/3
Nested grid inside 2/3 column:
Nested 1/2
Nested 1/2
CSS Classes Reference
Row Container
pa-row- Flex container for columnspa-row--no-gutter- Remove spacing between columns
Row Horizontal Alignment
pa-row--center- Center columns horizontallypa-row--end- Align columns to the rightpa-row--between- Space between columns (justify-content: space-between)pa-row--around- Space around columns (justify-content: space-around)
Row Vertical Alignment
pa-row--top- Align columns to toppa-row--middle- Align columns to middlepa-row--bottom- Align columns to bottompa-row--stretch- Stretch columns to fill heightpa-row--same-height- Equal height columns
Column Base Classes
pa-col- Auto-equal width column (flex: 1)pa-col-auto- Content-based width column
Percentage Columns (5% increments)
pa-col-5throughpa-col-100- Fixed percentage widths- Available: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100
Fraction Columns
pa-col-1-2- Half width (50%)pa-col-1-3,pa-col-2-3- Thirdspa-col-1-4,pa-col-3-4- Quarterspa-col-1-5,pa-col-2-5,pa-col-3-5,pa-col-4-5- Fifthspa-col-1-6,pa-col-5-6- Sixthspa-col-1-12,pa-col-5-12,pa-col-7-12,pa-col-11-12- Twelfths
Responsive Variants
pa-col-sm-{n}- 576px and uppa-col-md-{n}- 768px and uppa-col-lg-{n}- 992px and uppa-col-xl-{n}- 1200px and up- Works with percentages and fractions (e.g.,
pa-col-md-50,pa-col-lg-1-3)
Offsets
pa-offset-{n}- Left margin in 5% increments (5-95)pa-offset-{bp}-{n}- Responsive offsets (e.g.,pa-offset-md-25)
Column Modifiers
pa-col--no-padding- Remove column paddingpa-col--grow- Allow column to grow (flex-grow: 1)pa-col--shrink- Allow column to shrink (flex-shrink: 1)
Visibility Utilities
pa-hide- Always hiddenpa-show- Always visiblepa-hide-{bp}- Hidden at breakpoint and uppa-show-{bp}- Visible at breakpoint and uppa-hide-below-{bp}- Hidden below breakpointpa-show-below-{bp}- Visible below breakpoint