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

Remove gutters
Gutters will have the equivalent spacing of 32px
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.