How to use it
- Select an element and open Style > Layout. The Columns block sits next to Flex basis.
- Set Column count (1 to 12), Column width, or both. Column width is the ideal width. The browser fits as many columns as there is room for, up to the count if you set one.
- Set Column gap for the space between columns.
- For a line between columns, set Divider style (Solid, Dashed, Dotted or Double), then Divider width and Divider color. The divider shows only once you choose a style.
- To stop a child from splitting across two columns, select that child and set Keep together in a column to Yes (never split). Use it on a card, or on a heading with its paragraph. No turns it back off.
How it works with Bricks' flex layout
Multi-column layout is ignored on a flex container, and Bricks' Section, Container and Block are flex. So Column count and Column width also set the element's display to block. Children then flow down the columns instead of stacking with a gap, and the element's flex settings no longer apply.
Set Column count to 1 at a breakpoint to go back to a single column there.
Limits
- Keep together in a column is meant for the child of a multi-column element, not for the element itself.
- Only Column count and Column width change the display. Setting them at a breakpoint or in a state changes it there.
Settings
None. Turn the module on in Bricks > Kiln (it is on by default).
Requirements
Bricks 2.4 or newer.