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.
Note
There should be no whitespace modifiers attached to .blockGrid or its direct children. You can attach them on adjacent DOM or by wrapping the component in a <div>
Spacing modifiers
You can change the spacing in-between each block with the following modifiers to .blockGrid
Note
{small,medium,large} indicate rule declarations at respective screen-sizes.| Class | Description |
|---|---|
.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.
Note
Block Grids automatically have a width of100% when broken down to the smallest breakpoint unless specified (like .blockGrid-4); so .blockGrid-12 is not needed.Alignment modifiers
You can use alignment properties attached to .blockGrid from the Flex utility.