bon-ui
Grid
12-column layout
Use Grid and GridCol from @/components/element/grid. Columns span 1–12; pass a responsive object to change spans at breakpoints.
<Grid>
<GridCol span={3}>Sidebar</GridCol>
<GridCol span={9}>Main</GridCol>
</Grid>Full width
span 12
Halves
span 6
span 6
Thirds
span 4
span 4
span 4
Sidebar
Sidebar
Main
Mixed
span 8
span 4
span 4
span 4
span 4
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
Responsive
default: 12, sm: 6, lg: 4 — resize the viewport to see columns reflow.
A
B
C