Columns
Smartly divides your children content into responsive columns.
Smart Split
Splits each child into equal column width's that fill their parent container
EXAMPLE
Column 1
Column 2
Column 3
<Columns><div>Column 1</div><div>Column 2</div><div>Column 3</div></Columns>Split
Pass in an array with custom width values
EXAMPLE
Column 1
Column 2
Column 3
<Columns split={[25, 50, 35]}><div>Column 1</div><div>Column 2</div><div>Column 3</div></Columns>Collapse Margin
Collapses the margin between the columns on desktop
EXAMPLE
Column 1
Column 2
Column 3
<Columns split={[25, 50, 35]} collapseMargin={true}><div>Column 1</div><div>Column 2</div><div>Column 3</div></Columns>API
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The nodes that will map to each columned content. | |
| split | array | An array of custom width values can be used instead of smart splitting the columns such as [25, 75] to split a two-column layout to 25% and 75%. | |
| collapseMargin | bool | false | Collapses the margin between the columns on desktop |