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 '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 '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