react-auto-mosaic

installation

npm install --save react-auto-mosaic

demo

before (problem with mismatched tiles)

after (solved using react-auto-mosaic)

example

1. Define the number of columns in the grid.
2. Define grid breakpoints (like in bootstrap).
3. Create a list of tiles, of any height.
4. Enjoy automatic tiles behavior :)

export const DemoMosaic = () => (
    <ReactAutoMosaic
        gridColumns={12}
        gridGutterWidth={20}
        gridBreakpoints={{
            380: 12,
            576: 6,
            992: 4,
            1280: 3,
            1600: 2,
            1920: 1,
        }}
    >
        <div>tile-1</div>
        <div>tile-2</div>
        <div>tile-3</div>
        <div>tile-4</div>
        <div>tile-5</div>
        <div>tile-6</div>
        <div>tile-7</div>
        <div>tile-8</div>
        <div>tile-9</div>
    </ReactAutoMosaic>
)};
 

scripts

• start dev

$ npm start