Layout
A basic layout using this framework is achieved with three main parts: the container, the row, and the column.
The purpose of the container is to contain rows. By default, the container has a 100% width.
Rows are flex containers, and are used to contain columns. They use negative margins to counter the padding of the columns. Without the negative margins, content in nested rows/columns would not align properly. Rows have a default vertical padding gutter of 24 pixels.
Columns are the flex children of rows, and they contain your content. Columns have a default horizontal padding gutter of 24 pixels. As you can see below, any combination of columns can fit into a row - once the overall widths add up to over 100%, the row will wrap the remaining columns. An auto width .col class is also available that will expand with its contents.
Note: this page is best viewed on a tablet or desktop.
.container
.row
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.row
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.row
.col-3
.col-3
.col-3
.col-3
.row
.col-4
.col-4
.col-4
.row
.col-6
.col-6
.row
.col-12
.row
.col-11
.col-1
.row
.col-10
.col-2
.row
.col-9
.col-3
.row
.col-8
.col-4
.row
.col-7
.col-5
.row
.col
.col-5
.col
.col-1