FlexboxGrid

Grid layout component implemented via CSS Flexbox, providing 24 grids.

Import

import { FlexboxGrid } from 'rsuite';

// or
import FlexboxGrid from 'rsuite/FlexboxGrid';

Examples

Default

Layout

Alignment

Order

Responsive

Responsiveness can be achieved by combining with the <Col> component.

Props

<FlexboxGrid>

Property Type(default) Description
align enum: 'top' , 'middle' , 'bottom' ('top') align
as ElementType ('div') You can use a custom element for this component
classPrefix string ('flex-box-grid') The prefix of the component CSS class
justify enum : 'start', 'end', 'center', 'space-around', 'space-between' ('start') horizontal arrangement

<FlexboxGrid.Item>

Property Type(default) Description
as ElementType ('div') You can use a custom element for this component
classPrefix string ('flex-box-grid-item') The prefix of the component CSS class
colspan number (0) spacing between grids
order number (0) grid orders for sorting