All Projects → rootsher → react-auto-mosaic

rootsher / react-auto-mosaic

Licence: other
Automatic box behavior in the grid - responsive mosaic

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
shell
77523 projects

Projects that are alternatives of or similar to react-auto-mosaic

React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+1208.33%)
Mutual labels:  grid, responsive
vue-grid-responsive
Responsive grid system based on Bootstrap for Vue
Stars: ✭ 27 (+125%)
Mutual labels:  grid, responsive
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (+1258.33%)
Mutual labels:  grid, responsive
Framy Css
Very simple CSS Framework
Stars: ✭ 103 (+758.33%)
Mutual labels:  grid, responsive
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (+58.33%)
Mutual labels:  grid, responsive
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (+900%)
Mutual labels:  grid, responsive
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+17225%)
Mutual labels:  grid, responsive
Easygrid
EasyGrid - VanillaJS Responsive Grid
Stars: ✭ 77 (+541.67%)
Mutual labels:  grid, responsive
ekzo
💫 Functional Sass framework for rapid and painless development
Stars: ✭ 32 (+166.67%)
Mutual labels:  grid, responsive
griding
🧱 lean grid & responsive for react
Stars: ✭ 18 (+50%)
Mutual labels:  grid, responsive
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (+733.33%)
Mutual labels:  grid, responsive
bootstrap-grid-ms
Missing grid range in Bootstrap 3, micro-small from 480-767px.
Stars: ✭ 34 (+183.33%)
Mutual labels:  grid, responsive
React Native Flexbox Grid
Responsive Grid for React Native
Stars: ✭ 95 (+691.67%)
Mutual labels:  grid, responsive
Gridextra
Custom panel controls for WPF/UWP.
Stars: ✭ 149 (+1141.67%)
Mutual labels:  grid, responsive
Ungrid
ungrid - the simplest responsive css grid
Stars: ✭ 1,292 (+10666.67%)
Mutual labels:  grid, responsive
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: ✭ 2,170 (+17983.33%)
Mutual labels:  grid, responsive
Flex Layout
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Stars: ✭ 5,705 (+47441.67%)
Mutual labels:  grid, responsive
React Native Super Grid
Responsive Grid View for React Native
Stars: ✭ 971 (+7991.67%)
Mutual labels:  grid, responsive
react-super-styled
Responsive JSX layouts with Styled Components
Stars: ✭ 77 (+541.67%)
Mutual labels:  grid, responsive
svelte-grid-responsive
Responsive grid system based on Bootstrap for Svelte
Stars: ✭ 41 (+241.67%)
Mutual labels:  grid, responsive

react-auto-mosaic

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].