The Grid component consists of two components: the <Grid> wrapper and the <Grid-item> component, which is supposed to live inside the wrapper.
Width
prop: width
values: any combination of [1, 2, 3, 4, 5, 6]
Nested grids
We can obviously nest grids to create complex layouts
Size modifier
prop: size
This modifier provides different gutter sizes.
{{ size }}
Align modifier
prop: align
This modifier change the items alignment without modifying its height.
{{ align }}
Liquid modifier
prop: liquid
Liquid modifier makes every grid item to naturally space themsevles equally and expand to fit the entire row. Massively useful when all grid items should have the same width.
Stretch modifier
prop: stretch
This modifier will equal height of grid items.
Reverse modifier
prop: reverse
This modifier will reverse its grid items.
Auto modifier
prop: auto
This modifier will size the element according to its size property (which can itself be auto, which sizes the element based on its contents).
Wrapped modifier
prop: wrapped
Wrap items with a padding instead of using the padding as a column gutter.