# react-responsive-masonry > React responsive masonry component built with css flexbox Latest version **2.8.0** (published 2026-09-18) · MIT license · 0 weekly downloads ## Install ```sh npm install react-responsive-masonry pnpm add react-responsive-masonry yarn add react-responsive-masonry bun add react-responsive-masonry ``` ## Health **Score 58/100 (C)** — status: active. Positive: has types package; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no esm support. ## Facts | | | |---|---| | Version | 2.8.0 | | Published | 2026-09-18 | | First published | 2017-04-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/react-responsive-masonry) | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 455 | | Author | Cédric Delpoux | | Maintainers | cedricdelpoux | | Keywords | react, masonry, css, flexbox, responsive | ## Links - npm: https://www.npmjs.com/package/react-responsive-masonry - Repository: https://github.com/cedricdelpoux/react-responsive-masonry - Homepage: https://github.com/cedricdelpoux/react-responsive-masonry#readme - Issues: https://github.com/cedricdelpoux/react-responsive-masonry/issues - npm.io page: https://npm.io/package/react-responsive-masonry ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.8.0 (latest) — 2026-09-18 - 2.7.2 — 2026-04-13 - 2.7.1 — 2025-01-24 - 2.7.0 — 2025-01-20 - 2.6.0 — 2024-12-07 - 2.5.0 — 2024-12-04 - 2.4.1 — 2024-10-12 - 2.4.0 — 2024-10-12 - 2.3.0 — 2024-07-25 - 2.2.2 — 2024-07-25 - 2.2.1 — 2024-06-28 - 2.2.0 — 2024-02-19 - 2.1.7 — 2022-12-22 - 2.1.6 — 2022-09-24 - 2.1.5 — 2022-07-20 - … 15 more at https://npm.io/package/react-responsive-masonry/versions ## README # react-responsive-masonry [![npm package][npm-badge]][npm] [![Travis][build-badge]][build] [![Codecov][codecov-badge]][codecov] ![Module formats][module-formats] A lightweight React responsive masonry component built with css flexbox. ## Getting started [![react-responsive-masonry](https://nodei.co/npm/react-responsive-masonry.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-responsive-masonry/) You can download `react-responsive-masonry` from the NPM registry via the `npm` or `yarn` commands ```shell yarn add react-responsive-masonry npm install react-responsive-masonry --save ``` If you don't use package manager and you want to include `react-responsive-masonry` directly in your html, you could get it from the UNPKG CDN ```html https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js ``` ## Demo See [Demo page][github-page] ## Example ![React-responsive-masonry gif](/demo/src/example.gif) ## Usage If you want the number of columns change by resizing the window, you need to wrap the `Masonry` component by the `ResponsiveMasonry` component. Otherwise, you only need to use the `Masonry` component. ```js import React from "react" import Masonry, {ResponsiveMasonry} from "react-responsive-masonry" // The number of columns and the gutter change by resizing the window class MyWrapper extends React.Component { render() { return ( {/* Children */} ) } } // The number of columns and the gutter don't change by resizing the window class MyWrapper extends Component { render() { return ( {/* Children */} ) } } ``` ## Props ### Masonry component | Name | PropType | Description | Default | | ------------ | -------- | ------------------------------------------------------ | ------- | | columnsCount | Number | Injected by ResponsiveMasonry | 3 | | gutter | String | Margin surrounding each item e.g. "10px" or "1.5rem" | "0" | | className | String | Custom CSS class applied to the container element | null | | style | Object | Style object for customizing the container element | {} | | containerTag | String | Tag name of the container element | "div" | | itemTag | String | Tag name of the item element | "div" | | itemStyle | Object | Style object applied to each item | {} | | sequential | Boolean | If true, items are placed in the order they are passed | false | ### ResponsiveMasonry component | Name | PropType | Description | Default | | ----------------------- | -------- | ---------------------------------------------------------------------------------------- | ------------------------ | | columnsCountBreakPoints | Object | Keys are breakpoints in px, values are the columns number | {350: 1, 750: 2, 900: 3} | | gutterBreakPoints | Object | Keys are breakpoints in px, values are the gutter value in any valid CSS value for 'gap' | | ## Contributing - ⇄ Pull/Merge requests and ★ Stars are always welcome. - For bugs and feature requests, please [create an issue][github-issue]. - Pull requests must be accompanied by passing automated tests (`npm test`). See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines ## Changelog See [changelog](./CHANGELOG.md) ## License This project is licensed under the MIT License - see the [LICENCE.md](./LICENCE.md) file for details [npm-badge]: https://img.shields.io/npm/v/react-responsive-masonry.svg?style=flat-square [npm]: https://www.npmjs.org/package/react-responsive-masonry [build-badge]: https://img.shields.io/travis/cedricdelpoux/react-responsive-masonry/master.svg?style=flat-square [build]: https://travis-ci.org/cedricdelpoux/react-responsive-masonry [codecov-badge]: https://img.shields.io/codecov/c/github/cedricdelpoux/react-responsive-masonry.svg?style=flat-square [codecov]: https://codecov.io/gh/cedricdelpoux/react-responsive-masonry [module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square [github-page]: https://cedricdelpoux.github.io/react-responsive-masonry [github-issue]: https://github.com/cedricdelpoux/react-responsive-masonry/issues/new --- _Source: https://npm.io/package/react-responsive-masonry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._