🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Perfect Grid is a React component for creating Flickr-like grid layout with same height items grid.

Layout React

Documentation

react-perfect-grid

React Component for same height items grid (flickr like) : demo

demo react perfect grid demo react perfect grid

Install

npm install react-perfect-grid --save 

Usage

import PerfectGrid from 'react-perfect-grid'  let items = [   { url: 'http://www.website.com/image1.jpg' },   { url: 'http://www.website.com/image2.jpg' },   { url: 'http://www.website.com/image3.jpg' },   {     url: 'http://www.website.com/image4.jpg',     link: 'http://www.website.com/image4.jpg', // optional     over: <div>Your text</div>, // optional     width: 300, // optional     height: 300 // optional   } ]  ReactDOM.render (   <PerfectGrid     items={items}     maxHeight={300}  // maximum height of row     margins={20}     // margins in pixels     order={true}     // keep images order or not   />,   document.querySelector('.app') ) 

You May Also Like