Grid layout - no gutters

A flexible grid layout system with no gutters or space between. This grid can be used for various content types and can serve both text and imagery.

gridblock_100

gridblock_50

gridblock_33

gridblock_25

gridblock_66

gridblock_33

Modifier class	Purpose
`grid_wrap--margins`	add margin top and bottom to grid wrap
`grid_wrap--expand_width`	increase grid width to have no side gutters
`grid_wrap--w_1600`	set grid max width to 1600px
`grid_wrap--w_1400`	set grid max width to 1400px
`grid_wrap--w_1200`	set grid max width to 1200px
`grid_wrap--w_1000`	set grid max width to 1000px
`grid_wrap--w_800`	set grid max width to 800px
`grid_wrap--w_600`	set grid max width to 600px
`grid_wrap--w_400`	set grid max width to 400px

Grid layout - gutters

A flexible grid layout system with gutters and space between grid blocks. This grid can be used for various content types and can serve both text and imagery.

gridblock_100

gridblock_50

gridblock_33

gridblock_25

gridblock_66

gridblock_33

Modifier class	Purpose
`grid_wrap--margins`	add margin top and bottom to grid wrap
`grid_wrap--expand_width`	increase grid width to have no side gutters
`grid_wrap--w_1600`	set grid max width to 1600px
`grid_wrap--w_1400`	set grid max width to 1400px
`grid_wrap--w_1200`	set grid max width to 1200px
`grid_wrap--w_1000`	set grid max width to 1000px
`grid_wrap--w_800`	set grid max width to 800px
`grid_wrap--w_600`	set grid max width to 600px
`grid_wrap--w_400`	set grid max width to 400px

Grid layout - gutters, full width

A flexible grid layout system with gutters and space between grid blocks, but going fullwidth with no gutters on the left and right. This grid can be used for various content types and can serve both text and imagery.

gridblock_100

gridblock_50

gridblock_33

gridblock_25

gridblock_66

gridblock_33

Modifier class	Purpose
`grid_wrap--margins`	add margin top and bottom to grid wrap
`grid_wrap--expand_width`	increase grid width to have no side gutters
`grid_wrap--w_1600`	set grid max width to 1600px
`grid_wrap--w_1400`	set grid max width to 1400px
`grid_wrap--w_1200`	set grid max width to 1200px
`grid_wrap--w_1000`	set grid max width to 1000px
`grid_wrap--w_800`	set grid max width to 800px
`grid_wrap--w_600`	set grid max width to 600px
`grid_wrap--w_400`	set grid max width to 400px