Plock is a simple and easy React component for responsive Masonry grid layout.

How to use it:

1. Install and import the Plock component.

# NPM
$ npm i react-plock

import { Plock } from 'react-plock';

2. Add items to the Masonry grid layout.

<Plock nColumns={3} gap={10}>
  <div style={{ height: 100, width: "100%", background: "yellow" }}>1</div>
  <div style={{ height: 200, width: "100%", background: "blue" }}>2</div>
  <div style={{ height: 150, width: "100%", background: "red" }}>3</div>
  <div style={{ height: 500, width: "100%", background: "orange" }}>4</div>
</Plock>

Preview:

Download Details:

Author: itsrennyman

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/itsrennyman/react-plock

License: MIT