BlockGrid

Block Grids allow us to evenly split list items within a grid by specifying the number of items per row. Block Grids inherently add a negative left and right offset so it is flush with the edge of the column it is in.

Spacing modifiers

You can change the spacing in-between each block with the following modifiers to .blockGrid

ClassDescription
.blockGrid--collapse
.blockGrid--collapse@{small,medium,large}
Remove gutters
.blockGrid--largeGutter
.blockGrid--largeGutter@{small,medium,large}
Gutters will have the equivalent spacing of 32px
.blockGrid--xlargeGutter
.blockGrid--xlargeGutter@{small,medium,large}
Gutters will have the equivalent spacing of 64px

Size modifiers

Just like columns from the Grid component, Block Grids are constructed with the following naming pattern: .blockGrid-{1-12}. If you'd like to present different block widths on certain breakpoints, you can use the following: .blockGrid-{1-12}@{small,medium,large}.

You can chain these classes together for unique widths based on our global breakpoints: .blockGrid-8@small blockGrid-6@medium blockGrid-4@large.

Alignment modifiers

You can use alignment properties attached to .blockGrid from the Flex utility.