Layout
Columns
Lays out children horizontally, with prescriptive and exact child widths.
import { Columns } from '@balance-web/columns';Loading demo…
Usage
Each child of Columns represents a single column. By default that column will
span 1 fraction of the total number of children.
Loading demo…
Gap
The spacing between children can be adjusted using the gap prop.
Loading demo…
Vertical alignment
Items of varying height can be vertically aligned using the alignY prop.
Loading demo…
Collapse
Provide a breakpoint where the columns should collapse and stack on top of one another.
smallmediumlargexlarge
Resize your browser window to see the columns collapse:
Loading demo…
Template
Define the relative width of each column. You can create a more traditional grid-style column layout, à la Bootstrap:
Loading demo…