magic-grid-react

This is a React.js port of @e-oj's Magic Grid. Please check the /example folder for a example.

If you use images, make sure they have a set height, otherwise the grid will calculate weirdly.

Setup

Install the component

$ npm i magic-grid-react magic-grid

import MagicGrid from 'magic-grid-react'

<MagicGrid>
  {posts.map(post => (
    <Card
      style={{maxWidth: 200}}
      key={post.id}
      title={post.title}
      body={post.body}
    />
  ))}
</MagicGrid>

Props

Supports all optinons in Magic-Grid

Default Props:

| Prop | Default | Comment | |:------------|:----------|:---------------------------| | gutter | 32 | Gap between elements | | maxCols | 5 | Max number of colums | | useMin | false | Use min width of columns | | animate | false | Animate item positioning |