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-12

.column-6

.column-4

.column-3

.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-2

.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

Offsetting Columns

It's possible to offsets columns by adding .offset-{size} and .offset-{viewportsize}-{size} classes.

.column-sm-1

.column-md-12

.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-md-6.offset-md-6

.column-md-4.offset-md-4

.column-xs-12.column-sm-10.offset-sm-1.column-md-8.offset-md-2

.column-sm-1

Mixing Offsets

Offsets can be mixed and be different per viewport size.

.column-sm-1

.column-sm-1.offset-sm-10

.column-md-2.offset-md-2

.column-sm-1.offset-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-1

.column-xs-1.offset-xs-1

.column-sxs-1.offset-xs-2

.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-sm-6

.column-xs-2

.column-lg-10.offset-lg-1

.column-sm-6

.column-sm-10.offset-sm-1

.column-xs-6

.column-xs-2

.column-xs-6

.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