React Masonry List

A Masonry component implemented through css grid, fast and responsive. :star2: Each element first fills the column with the largest remaining space in the vertical direction, which will ensure that the height difference of each column is minimal.

:point_right: demo page

Install

npm install react-masonry-list --save

Or use yarn yarn add react-masonry-list

Usage

1import Layout from 'react-masonry-list';
2
3const items = [
4  //...
5];
6
7// If item contains img elements, don't forget set img's width. In order to get a better display effect, you can also set img's `object-fit` to `contain`.
8
9const List = () => {
10  return (
11    <Layout
12      minWidth={100}
13      items={items.map((item) => (
14        <div key={item.id}>...</div>
15      ))}
16    ></Layout>
17  );
18};

Use with NextJS

Because it's a client side only component, when using it with NextJS, you need to import it by dynamic API:

1import dynamic from 'next/dynamic';
2
3const Layout = dynamic(() => import('react-masonry-list'), {
4  ssr: false,
5});
6
7const items = [
8  //...
9];
10
11// If item contains img elements, don't forget set img's width. In order to get a better display effect, you can also set img's `object-fit` to `contain`.
12
13const List = () => {
14  return (
15    <Layout
16      minWidth={100}
17      items={items.map((item) => (
18        <div key={item.id}>...</div>
19      ))}
20    ></Layout>
21  );
22};

Props

name	type	required	default	description
items	react node array	No	[]	The items you want to render
colCount	number	No	3	Column count
gap	number	No	10	The size(px) of the gap between elements
minWidth	number	No	300	The min width(px) of columns
className	string	No	\	Custom class name of layout container

Browser compatibility

Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#browser_compatibility