react-masonry-css

React Masonry layout component powered by CSS, dependancy free

1,009

View on GitHub View on NPM

Top Related Projects

masonry

16,591

:love_hotel: Cascading grid layout plugin

bricks.js

4,679

A blazing fast masonry layout generator for fixed width elements.

packery

4,216

:bento: Gapless, draggable grid layouts

react-stonecutter

1,229

Animated grid layout component for React

react-masonry-component

1,459

A React.js component for using @desandro's Masonry

Quick Overview

React Masonry CSS is a lightweight React component for creating responsive masonry layouts using CSS. It provides a simple way to implement a Pinterest-style grid layout without relying on JavaScript calculations, making it efficient and performant.

Pros

Lightweight and fast, using CSS for layout calculations
Easy to implement with minimal configuration
Responsive design out of the box
No external dependencies

Cons

Limited customization options compared to JavaScript-based masonry libraries
May not work well with dynamically sized content
Requires modern CSS support (flexbox)

Code Examples

Basic usage:

import Masonry from 'react-masonry-css'

const MyComponent = () => (
  <Masonry
    breakpointCols={3}
    className="my-masonry-grid"
    columnClassName="my-masonry-grid_column"
  >
    {items.map(item => (
      <div key={item.id}>{item.content}</div>
    ))}
  </Masonry>
)

Custom breakpoints:

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

<Masonry
  breakpointCols={breakpointColumnsObj}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {/* Your items */}
</Masonry>

With custom styles:

import Masonry from 'react-masonry-css'

const MyComponent = () => (
  <Masonry
    breakpointCols={3}
    className="my-masonry-grid"
    columnClassName="my-masonry-grid_column"
  >
    {items.map(item => (
      <div key={item.id} style={{ background: '#eee', marginBottom: '10px' }}>
        {item.content}
      </div>
    ))}
  </Masonry>
)

Getting Started

Install the package:
```
npm install react-masonry-css
```

Import and use in your React component:

import Masonry from 'react-masonry-css'

const MyComponent = () => (
  <Masonry
    breakpointCols={3}
    className="my-masonry-grid"
    columnClassName="my-masonry-grid_column"
  >
    {items.map(item => (
      <div key={item.id}>{item.content}</div>
    ))}
  </Masonry>
)

Add some basic CSS:

.my-masonry-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -30px;
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 30px;
  background-clip: padding-box;
}

Competitor Comparisons

masonry

16,591

:love_hotel: Cascading grid layout plugin

Pros of Masonry

More mature and widely adopted project with a larger community
Supports various layouts beyond just columns (e.g., fitRows, horizontal)
Framework-agnostic, can be used with any JavaScript project

Cons of Masonry

Requires more setup and configuration compared to React-Masonry-CSS
May have performance issues with large numbers of elements
Not specifically optimized for React applications

Code Comparison

Masonry:

var msnry = new Masonry( '.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200
});

React-Masonry-CSS:

<Masonry
  breakpointCols={3}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Masonry>

Key Differences

React-Masonry-CSS is specifically designed for React applications, offering easier integration
Masonry provides more layout options and customization
React-Masonry-CSS uses CSS-based layout, potentially offering better performance for React apps
Masonry has a larger ecosystem of plugins and extensions

Use Cases

Choose Masonry for non-React projects or when advanced layout options are needed
Opt for React-Masonry-CSS in React applications for simpler implementation and potentially better performance

bricks.js

4,679

A blazing fast masonry layout generator for fixed width elements.

Pros of bricks.js

Vanilla JavaScript library, not tied to any specific framework
Supports both horizontal and vertical layouts
Lightweight and performant, with minimal dependencies

Cons of bricks.js

Less actively maintained (last update in 2017)
Requires more manual setup and configuration
No built-in React integration

Code Comparison

react-masonry-css:

import Masonry from 'react-masonry-css'

<Masonry
  breakpointCols={3}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Masonry>

bricks.js:

import Bricks from 'bricks.js'

const instance = Bricks({
  container: '.container',
  packed: 'data-packed',
  sizes: [
    { columns: 2, gutter: 10 },
    { mq: '768px', columns: 3, gutter: 25 },
    { mq: '1024px', columns: 4, gutter: 50 }
  ]
})

instance.pack()

Summary

react-masonry-css is a React-specific library that offers easy integration and declarative usage within React applications. It's more actively maintained and provides a simpler API for React developers.

bricks.js is a framework-agnostic solution with more flexibility in terms of layout options and browser support. However, it requires more manual setup and isn't tailored for React applications.

Choose react-masonry-css for React projects with simpler requirements, and bricks.js for non-React projects or when more control over the layout is needed.

packery

4,216

:bento: Gapless, draggable grid layouts

Pros of Packery

More feature-rich, offering advanced layout options like draggable items and custom item sizing
Supports multiple layout modes, including horizontal and vertical alignment
Provides a robust API for programmatic control and customization

Cons of Packery

Requires a commercial license for use in commercial projects
Larger file size and potentially higher performance overhead
Steeper learning curve due to more complex configuration options

Code Comparison

Packery:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10,
  columnWidth: 200
});

react-masonry-css:

<Masonry
  breakpointCols={3}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Masonry>

Key Differences

react-masonry-css is specifically designed for React applications, while Packery is framework-agnostic
Packery offers more layout options and features, but react-masonry-css is simpler to implement in React projects
react-masonry-css is free for all uses, while Packery requires a commercial license for commercial projects

Use Cases

Choose Packery for complex layouts with advanced features like draggable items or when working outside of React
Opt for react-masonry-css in React projects where a simple, lightweight masonry layout is sufficient

react-stonecutter

1,229

Animated grid layout component for React

Pros of react-stonecutter

Offers more animation options and transitions between layout changes
Supports both grid and list layouts with the same component
Provides better performance for larger collections of items

Cons of react-stonecutter

More complex API and setup compared to react-masonry-css
Less frequently updated and maintained
Steeper learning curve for beginners

Code Comparison

react-masonry-css:

<Masonry
  breakpointCols={3}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Masonry>

react-stonecutter:

<SpringGrid
  component="ul"
  columns={3}
  columnWidth={150}
  gutterWidth={5}
  gutterHeight={5}
  itemHeight={200}
  springConfig={{ stiffness: 170, damping: 26 }}
>
  {items.map(item => <li key={item.id}>{item.content}</li>)}
</SpringGrid>

The code comparison shows that react-stonecutter requires more configuration options, but offers greater control over layout and animations. react-masonry-css has a simpler API, making it easier to implement for basic masonry layouts. Both libraries achieve similar results, but react-stonecutter provides more flexibility at the cost of increased complexity.

react-masonry-component

1,459

A React.js component for using @desandro's Masonry

Pros of react-masonry-component

Uses the original Masonry library, ensuring full compatibility and feature set
Provides more customization options and advanced features
Supports server-side rendering out of the box

Cons of react-masonry-component

Larger bundle size due to including the full Masonry library
May have a steeper learning curve for those unfamiliar with Masonry
Requires additional setup and configuration for optimal performance

Code Comparison

react-masonry-component:

import Masonry from 'react-masonry-component';

<Masonry
  elementType={'ul'}
  options={masonryOptions}
  disableImagesLoaded={false}
  updateOnEachImageLoad={false}
>
  {items.map(item => <li key={item.id}>{item.content}</li>)}
</Masonry>

react-masonry-css:

import Masonry from 'react-masonry-css';

<Masonry
  breakpointCols={breakpointColumnsObj}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Masonry>

The code comparison shows that react-masonry-component offers more configuration options, while react-masonry-css has a simpler API and relies on CSS for layout control.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

ð Why?

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'

//...

<Masonry
  breakpointCols={3}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column">
  {/* array of JSX items */}
</Masonry>

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
};

//...

<Masonry
  breakpointCols={breakpointColumnsObj}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  <div>My Element</div>
  <div>My Element</div>
  <div>My Element</div>
  <div>My Element</div>
</Masonry>

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

https://paulcollett.github.io/react-masonry-css/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 = items.map(function(item) {
  return <div key={item.id}>{item.name}</div>
});

<Masonry
  breakpointCols={myBreakpointsAndCols}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
  {items}
</Masonry>

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

DummyJS

Improve your frontend builds with dynamic placeholder images and dummy text from DummyJs.com. https://www.npmjs.com/package/dummyjs

Suggestions & Issues

https://github.com/paulcollett/react-masonry-css/issues/

Contact me direct:

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Masonry

Cons of Masonry

Code Comparison

Key Differences

Use Cases

Pros of bricks.js

Cons of bricks.js

Code Comparison

Summary

Pros of Packery

Cons of Packery

Code Comparison

Key Differences

Use Cases

Pros of react-stonecutter

Cons of react-stonecutter

Code Comparison

Pros of react-masonry-component

Cons of react-masonry-component

Code Comparison

Convert designs to code with AI

README

ð Why?

ð What does this do

ð³ï¸ What doesn't this do

ð² Simple Usage

Responsive Breakpoints

Configuration Props

Example Demo

Common usage

Optional, Responsive gutters

Use with Preact

DummyJS

Suggestions & Issues

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

ð Why?

ð What does this do

ð³ï¸ What doesn't this do

ð² Simple Usage