React Masonry Css

React Masonry layout component powered by CSS, dependancy free
Alternatives To React Masonry Css
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Masonry15,4771,9992062 years ago13July 04, 201850HTML
:love_hotel: Cascading grid layout plugin
Shuffle2,27495136 months ago27July 07, 202216mitJavaScript
Categorize, sort, and filter a responsive grid of items
583 years agoApril 26, 2016114mitHTML
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
Egjs Infinitegrid1,6755132 months ago135August 04, 202321mitTypeScript
A module used to arrange card elements including content infinitely on a grid layout.
26 months ago100January 18, 20219mitObjective-C
React Masonry Css65047262 years ago19April 04, 202119mitJavaScript
React Masonry layout component powered by CSS, dependancy free
Vue Masonry62967285 months ago39July 14, 202216mitJavaScript
💠 Vue.js directive for masonry blocks layouting ✅
6 years ago1February 23, 20173otherHTML
pure CSS masonry layouts
a year ago3JavaScript
Simple bookmarks and notes
6 months ago11October 13, 20227mitJavaScript
Minimalist dependancy free Masonry layout library
Alternatives To React Masonry Css
Select To Compare

Alternative Project Comparisons

A Masonry component leveraging CSS and native React rendering, for fast, responsive masonry layouts



Existing solutions like React wrapped DeSandro Masonry, while popular, don't actually leverage React's highly optimized Virtual DOM renderer and in DeSandro Masonry's case, actually renders elements twice before showing the layout. All of this is ok but we found it to lead to a slow, "laggy" user experience that would occasionally miss-render our layout.

Our need for a simple Masonry layout that was fast, used React's Virtual DOM without needing jQuery or other dependencies led us to explore what we could do with the latest techniques using just CSS within a React Component.

Between flexbox, css columns, css grid we settled on plain ol' div's and a dab of flexbox that allows for "fluid" responsive layouts by default but most importantly is true to Reacts rendering lifecycle.

react-masonry-css Is a React Component with a simple interface to order items into the desired columns at specified breakpoints. With minimal CSS this leads to a quick, reliable solution that also has great browser support along with rendering performance.

What does this do

  • Responsive! ..always
  • IE 10+
  • No Dependencies - Which means no need for jQuery!
  • Works with existing CSS animations on your elements, like fading in on first load
  • CSS powered (Faster to render)
  • Allows for Gaps (Gutters) between elements

What doesn't this do

  • Works with elements with different widths
  • Sorting based on height - This kills performance, so if you don't need it we're here for you

Simple Usage

Add react-masonry-css to your project:

npm install react-masonry-css

In your React Component...

import Masonry from 'react-masonry-css'


  {/* array of JSX items */}

And, CSS:

.my-masonry-grid {
  display: -webkit-box; /* Not needed if autoprefixing */
  display: -ms-flexbox; /* Not needed if autoprefixing */
  display: flex;
  margin-left: -30px; /* gutter size offset */
  width: auto;
.my-masonry-grid_column {
  padding-left: 30px; /* gutter size */
  background-clip: padding-box;

/* Style your items */
.my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
  background: grey;
  margin-bottom: 30px;

Responsive Breakpoints

Different columns can be specified by passing an object containing key's of the window widths and their value as the number of columns. To have a fallback value, use the default key.

const breakpointColumnsObj = {
  default: 4,
  1100: 3,
  700: 2,
  500: 1


  <div>My Element</div>
  <div>My Element</div>
  <div>My Element</div>
  <div>My Element</div>

Configuration Props

  • breakpointCols={{default: 4, 800: 2}} optional (defaults to 2 columns)
  • className for the container
  • columnClassName class name added to each generated column

Example Demo

Common usage

outputting an array of items:

var items = [
  {id: 1, name: 'My First Item'},
  {id: 2, name: 'Another item'},
  {id: 3, name: 'Third Item'},
  {id: 4, name: 'Here is the Fourth'},
  {id: 5, name: 'High Five'}

// Convert array to JSX items
items = {
  return <div key={}>{}</div>


Optional, Responsive gutters

We can add the following to the above CSS to further adjust the layout between screen sizes.

/* Optional, different gutter size on mobile */
@media (max-width: 800px) {
  .my-masonry-grid {
    margin-left: -15px; /* gutter size offset */
  .my-masonry-grid_column {
    padding-left: 15px; /* gutter size offset */
  .my-masonry-grid_column > div {
    margin-bottom: 15px; /* space between items */

Use with Preact

You can use react-masonry-css with Preact when using preact/compat


Improve your frontend builds with dynamic placeholder images and dummy text from

Suggestions & Issues

Contact me direct:

Popular Layout Projects
Popular Masonry Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
React Components