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_50
gridblock_33
gridblock_33
gridblock_33
gridblock_25
gridblock_25
gridblock_25
gridblock_25
gridblock_66
gridblock_33
Modifier classPurpose
grid_wrap--marginsadd margin top and bottom to grid wrap
grid_wrap--expand_widthincrease grid width to have no side gutters
grid_wrap--w_1600set grid max width to 1600px
grid_wrap--w_1400set grid max width to 1400px
grid_wrap--w_1200set grid max width to 1200px
grid_wrap--w_1000set grid max width to 1000px
grid_wrap--w_800set grid max width to 800px
grid_wrap--w_600set grid max width to 600px
grid_wrap--w_400set 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_50
gridblock_33
gridblock_33
gridblock_33
gridblock_25
gridblock_25
gridblock_25
gridblock_25
gridblock_66
gridblock_33
Modifier classPurpose
grid_wrap--marginsadd margin top and bottom to grid wrap
grid_wrap--expand_widthincrease grid width to have no side gutters
grid_wrap--w_1600set grid max width to 1600px
grid_wrap--w_1400set grid max width to 1400px
grid_wrap--w_1200set grid max width to 1200px
grid_wrap--w_1000set grid max width to 1000px
grid_wrap--w_800set grid max width to 800px
grid_wrap--w_600set grid max width to 600px
grid_wrap--w_400set 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_50
gridblock_33
gridblock_33
gridblock_33
gridblock_25
gridblock_25
gridblock_25
gridblock_25
gridblock_66
gridblock_33
Modifier classPurpose
grid_wrap--marginsadd margin top and bottom to grid wrap
grid_wrap--expand_widthincrease grid width to have no side gutters
grid_wrap--w_1600set grid max width to 1600px
grid_wrap--w_1400set grid max width to 1400px
grid_wrap--w_1200set grid max width to 1200px
grid_wrap--w_1000set grid max width to 1000px
grid_wrap--w_800set grid max width to 800px
grid_wrap--w_600set grid max width to 600px
grid_wrap--w_400set grid max width to 400px