Skip to content

Automatic box behavior in the grid - responsive mosaic.

Notifications You must be signed in to change notification settings

rootsher/react-auto-mosaic

Repository files navigation

npm version npm downloads GitHub issues GitHub PRs MIT license

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