A React component that renders its children in a column layout that supports wrapping.
It aims to achieve the layout behaviour that should be supported by flex box (flex-direction: column; flex-wrap: wrap;) but which is not implemented properly in any major browser.
npm install react-column-wrap
Positions its children in a column layout.
Features
- Supports child items of any (including undefined) sizes.
- Updates when child item size changes (reorganising children and collapsing to a single column where possible).
- Creates columns of equal width based on the widest item.
Limitations
- First pass render looks ugly.
- Currently requires a fixed column height to be specified rather than calculating this from the containing element.
See the demo
Height in pixels of the container element. Items will be wrapped onto the next column where necessary.
The items to layout. Can be of mixed / undefined sizes as react-measure is used to calculate the size of each item.
import { ColumnWrap } from 'react-column-wrap'
<ColumnWrap columnHeight={1000}>
<Item />
<Item />
<Item />
<Item />
</ColumnWrap>