Proportional Grid

The main grid in waldorf is based on the width of one card. Landing pages more often use this proportional grid.

N.b. The card appearance is applied separately - grid class only provide dimensions

Proportional Grid with a 0 pixel gutter (.grid-wrapper--0)

.col--one-whole
.col--one-half
.col--one-half
.col--one-third
.col--one-third
.col--one-third
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth

Proportional Grid with a 10 pixel gutter (.grid-wrapper--10)

.col--one-whole
.col--one-half
.col--one-half
.col--one-third
.col--one-third
.col--one-third
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth

Proportional Grid with a 15 pixel gutter (.grid-wrapper--15)

.col--one-whole
.col--one-half
.col--one-half
.col--one-third
.col--one-third
.col--one-third
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth

Proportional Grid with a 20 pixel gutter (.grid-wrapper--20)

.col--one-whole
.col--one-half
.col--one-half
.col--one-third
.col--one-third
.col--one-third
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth

Proportional Grid with a 30 pixel gutter (.grid-wrapper--30)

.col--one-whole
.col--one-half
.col--one-half
.col--one-third
.col--one-third
.col--one-third
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-quarter
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth
.col--one-fifth