https://github.com/rootsher/react-auto-mosaic

Automatic box behavior in the grid - responsive mosaic.
https://github.com/rootsher/react-auto-mosaic

box grid mosaic react-auto-mosaic react-mosaic responsive tiles

Last synced: 6 months ago
JSON representation

Automatic box behavior in the grid - responsive mosaic.

• Host: GitHub
• URL: https://github.com/rootsher/react-auto-mosaic
• Owner: rootsher
• Created: 2020-04-05T12:01:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-01-21T19:36:03.000Z (over 3 years ago)
• Last Synced: 2025-04-16T03:11:44.963Z (6 months ago)
• Topics: box, grid, mosaic, react-auto-mosaic, react-mosaic, responsive, tiles
• Language: TypeScript
• Homepage:
• Size: 14.7 MB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [react-auto-mosaic](https://github.com/rootsher/react-auto-mosaic)

[![npm version](https://img.shields.io/npm/v/react-auto-mosaic.svg)](https://www.npmjs.com/package/react-auto-mosaic)

[![npm downloads](https://img.shields.io/npm/dm/react-auto-mosaic.svg)](https://www.npmjs.com/package/react-auto-mosaic)

[![GitHub issues](https://img.shields.io/github/issues/rootsher/react-auto-mosaic.svg)](https://github.com/rootsher/react-auto-mosaic/issues)

[![GitHub PRs](https://img.shields.io/github/issues-pr/rootsher/react-auto-mosaic.svg)](https://github.com/rootsher/react-auto-mosaic/pulls)

[![MIT license](https://img.shields.io/npm/l/react-auto-mosaic.svg)](https://opensource.org/licenses/MIT)

## installation

```shell script

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 :)

```ts

export const DemoMosaic = () => (

    

        
tile-1

        
tile-2

        
tile-3

        
tile-4

        
tile-5

        
tile-6

        
tile-7

        
tile-8

        
tile-9

    

)};


```

## scripts

-   start dev

```shell script

$ npm start

```