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