A Masonry component implemented through css grid, fast and responsive.
npm install 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
npm install react-masonry-list --save
Or use yarnyarn add react-masonry-list
``js
import Layout from 'react-masonry-list';
const items = [
//...
];
// 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.
const List = () => {
return (
items={items.map((item) => (
$3
Because it's a client side only component, when using it with NextJS, you need to import it by
dynamic API:`js
import dynamic from 'next/dynamic';const Layout = dynamic(() => import('react-masonry-list'), {
ssr: false,
});
const items = [
//...
];
// 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.const List = () => {
return (
minWidth={100}
items={items.map((item) => (
...
))}
>
);
};
``| 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 |
Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#browser_compatibility