Simple Flexy Grid System w/ CSS Custom Props
Back to
GitHub Repo
Auto width
100%
50%
50%
33.3%
33.3%
33.3%
25%
25%
25%
25%
20%
20%
20%
20%
20%
10%
10%
10%
10%
10%
10%
10%
10%
10%
10%
Fixed width
.col-12
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
.col-3
.col-6
.col-3
.col-3
.col-2
.col-2
.col-2
.col-3
.col-5
.col-7
.col-7
.col-5
Nesting
.col-8
.col-6
.col-6
.col-4
Offset
.col-*-push
.col-1
.col-1
.col-2
.col-2
.col-3
.col-3
.col-4
.col-4
.col-5
.col-5
.col-5
.col-6
.col-4
.col-7
.col-3
.col-8
.col-2
.col-9
.col-1
.col-10
.col-11
Content Alignment
.items-start
.col-3
.col-3
.col-3
.col-3
.items-center
.col-3
.col-3
.col-3
.col-3
.items-end
.col-3
.col-3 - .self-start
.col-3 - .self-center
col-3
align-self
- Y (both)
.col - .self-auto
.col - .self-start
.col - .self-center
.col - .self-end
.col - .self-expand