@placardi/masonry-grid

Masonry grid component is used to create masonry layouts for fixed width elements.

Installation

npm i @placardi/masonry-grid

Dependencies

• react
• styled-components

Usage

Basic usage

Masonry grid can be used as a standalone component and has no external dependencies. In order to use the masonry grid component, add a MasonryGrid wrapper and populate it with MasonryGridItem children. Do not forget to specify sizes array, which describes grid behaviour at different breakpoints.

import React, { FC } from 'react';
import MasonryGrid, { MasonryGridItem } from '@placardi/masonry-grid';

const App: FC = () => (
  <MasonryGrid>
    <MasonryGridItem>child 1</MasonryGridItem>
    <MasonryGridItem>child 2</MasonryGridItem>
    <MasonryGridItem>child 3</MasonryGridItem>
  </MasonryGrid>
)

export default App;