Grid

Use a grid System to build repsosive Colums.

Four equal columns

Create a grid-row div and add multiple grid-col. All Columns will have the same width.

Column 1

Column 2

Column 3

Column 4

Custom Sizes

To change the size of a column append the class grid-col-[size]. All other columns get the size automatically.

grid-col-2

rid-col-4

Auto

grid-col-4

grid-col-5

Auto

Other sizes

.grid-col-half
.grid-col-one-third
.grid-col-two-third
.grid-col-one-quarter
.grid-col-three-quarter

Two columns with offset

Add the class offset-is-[size] to get space between the columns

No offset

offset-is-half

No offset

offset-is-2

Other offsets

.offset-is-half
.offset-is-one-third
.offset-is-two-third
.offset-is-one-quarter
.offset-is-three-quarter