Simple Flexbox Grid System
I'm gonna go build my own grid system! With blackjack. And hookers.
The Basics
The grid is divided into 12 units.
- Add
.has-columns
to the container/wrapper/row
- Add
.column.
and .column-{size}
to each column. The value for {size}
is the number of units the column should take it.
Gutters are added in between 2 adjacent columns
.column-4
.column-4
.column-4
.column-3
.column-3
.column-3
.column-3
.column-2
.column-2
.column-2
.column-2
.column-2
.column-2
Combining Columns
It's possible to mix columns of different widths. As long as their combined number of units does not exceed the total number of units (e.g. 12). They will fit into their row.
.column-2
.column-4
.column-4
.column-2
.column-1
.column-1
.column-1
.column-1
.column-1
.column-1
.column-1
.column-5
.column-1
.column-4
.column-5
.column-2
Responsive Columns
Different viewport sizes are defined.
- xxs =
20em
(320px
)
- xs =
30em
(480px
)
- sm =
48em
(768px
)
- md =
64em
(1024px
)
- lg =
75em
(1200px
)
- xl =
90em
(1440px
)
It's possible to add classes to the columns which only target a given size for a given viewportsize in the format of .column-{viewportsize}-{size}
. The value for {viewportsize}
is one of the defined viewport sizes. The value for {size}
is the number of units the column should take (for the given {viewportsize}
).
E.g. a column with the class .column-md-4
will be 4 units wide for the md
viewport size ranging from 64em
to 75em
.
You can combine several classes of different sizes. E.g. a column with the class .column-md-6.column-lg-4
will be 6 units wide for the md
viewport size, and 4 units wide for the lg
viewport size.
.column-sm-6.column-md-4
.column-sm-6.column-md-4
Offsetting Columns
It's possible to offsets columns by adding .offset-{size}
and .offset-{viewportsize}-{size}
classes.
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column.column-sm-11.offset-sm-1
.column.column-sm-10.offset-sm-2
.column.column-sm-9.offset-sm-3
.column.column-sm-8.offset-sm-4
.column.column-sm-7.offset-sm-5
.column.column-sm-6.offset-sm-6
.column.column-sm-5.offset-sm-7
.column.column-sm-4.offset-sm-8
.column-xs-12.column-sm-10.offset-sm-1.column-md-8.offset-md-2
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
Mixing Offsets
Offsets can be mixed and be different per viewport size.
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1.offset-sm-10
.column-md-2.offset-md-2
.column-md-2.offset-md-2
.column-md-2.offset-md-2
.column-sm-1.offset-sm-1
.column-sm-1.offset-sm-1
.column-sm-1.offset-sm-1
.column-sm-1.offset-sm-1
.column-sm-1.offset-sm-1
.column-sm-1.offset-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-sm-1
.column-xs-6.column-md-5.offset-md-1.offset-lg-0.column-lg-4
.column-xs-6.column-md-5.column-lg-4
.column-xs-6.column-md-5.column-lg-4
.column-xs-1
.column-xs-1.offset-xs-1
.column-sxs-1.offset-xs-2
.column-xs-1.offset-xs-1
.column-xs-1.offset-xs-1
.column-xs-1.offset-xs-1
Nesting Columns
The nesting of columns is supported, by putting a new .has-columns
into a .column
.column-sm-6
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-sm-6
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-lg-10.offset-lg-1
.column-sm-6
.column-sm-6
.column-sm-10.offset-sm-1
.column-xs-6
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-6
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
.column-xs-2
Auto and Stretch Columns
In some cases one would want to implement a column based UI, but without sticking to the grid. Think of a message component that holds an avatar and a content. In that case the avatar should only take up the space it requires, and the content should take up the remaining space.
.column-auto
columns will not take up a given portion, but will only take up the space their content requires.
.column-stretch
columns will take up the remaining space.
.column-auto
.column-stretch
.column-auto