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 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_50
gridblock_33
gridblock_33
gridblock_33
gridblock_25
gridblock_25
gridblock_25
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.
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 |