A React component that renders its children in a column layout that supports wrapping
MIT License
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
Limitations
See the demo
columnHeight
: PropTypes.numberHeight in pixels of the container element. Items will be wrapped onto the next column where necessary.
children
: PropTypes.nodeThe 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>