react-masonry-css

react-masonry-css is a lightweight and responsive React component designed to create dynamic, Pinterest-like masonry grid layouts. A masonry layout arranges items of varying heights into columns, optimizing space by packing them tightly and eliminating unwanted gaps that might appear in a standard grid layout when items have different heights. This library is particularly useful for displaying image galleries, portfolios, news feeds, or any content where items have inconsistent dimensions.

How it works:
Unlike some older masonry libraries that rely on complex JavaScript calculations for absolute positioning of each item, `react-masonry-css` achieves its effect through a clever combination of DOM manipulation and CSS. It creates multiple column `div` elements within a main container. When you provide it with a list of child components, it intelligently distributes these children among its internal columns to balance their cumulative heights as much as possible. This approach ensures an efficient and performant layout, making it inherently responsive.

Key Features:
* Responsive: Automatically adjusts the number of columns based on predefined breakpoints, adapting seamlessly to different screen sizes.
* Lightweight: Has minimal dependencies, contributing to a smaller bundle size and faster load times.
* Performant: Efficiently renders layouts without excessive re-calculations, even with many items.
* Easy to Use: Provides a simple and intuitive API for integration into React applications.
* Pure React/CSS: Built with modern React principles and CSS, avoiding heavy external libraries like jQuery.

Core Props:
* `breakpointCols`: (Required) This is the most important prop. It defines how many columns should be displayed at different screen widths. It can be a number (default column count) or an object where keys are CSS `min-width` values (e.g., `500`) and values are the corresponding number of columns (e.g., `2`).
* `className`: (Optional) A CSS class name to apply to the main container `div` of the masonry layout.
* `columnClassName`: (Optional) A CSS class name to apply to each individual column `div` within the masonry layout.
* `children`: (Required) The React elements or components that you want to arrange in the masonry grid. These are passed as children to the `Masonry` component.

Installation:
You can install `react-masonry-css` using npm or yarn:
```bash
npm install react-masonry-css
# or
yarn add react-masonry-css
```

Example Code

import React from 'react';
import Masonry from 'react-masonry-css';
import './MasonryExample.css'; // Assume you have a CSS file for styling

const items = [
  { id: 1, height: '200px', content: 'Item 1 - Short content' },
  { id: 2, height: '350px', content: 'Item 2 - This item has more content, making it taller than the first one. It fills up more vertical space.' },
  { id: 3, height: '250px', content: 'Item 3 - Medium content' },
  { id: 4, height: '400px', content: 'Item 4 - A very tall item to demonstrate the masonry effect effectively. It will span across multiple virtual rows.' },
  { id: 5, height: '180px', content: 'Item 5 - Another short one' },
  { id: 6, height: '300px', content: 'Item 6 - More detailed content for this block, showcasing variable height.' },
  { id: 7, height: '220px', content: 'Item 7 - Just a standard block' },
  { id: 8, height: '450px', content: 'Item 8 - The tallest item, pushing the boundaries and forcing the layout to adapt gracefully.' },
  { id: 9, height: '280px', content: 'Item 9 - Another medium-height block.' },
  { id: 10, height: '320px', content: 'Item 10 - Final item with a moderate height.' }
];

const breakpointColumnsObj = {
  default: 4, // Default number of columns for larger screens
  1100: 3,    // 3 columns when screen width is 1100px or less
  700: 2,     // 2 columns when screen width is 700px or less
  500: 1      // 1 column when screen width is 500px or less
};

function MasonryExample() {
  return (
    <div className="masonry-container-wrapper">
      <h1>React Masonry CSS Example</h1>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {items.map(item => (
          <div key={item.id} className="masonry-item" style={{ height: item.height }}>
            <h2>{item.content.split(' ')[0]} {item.content.split(' ')[1]}</h2>
            <p>{item.content}</p>
          </div>
        ))}
      </Masonry>
    </div>
  );
}

export default MasonryExample;

/* MasonryExample.css content (for styling) */
/*
.masonry-container-wrapper {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

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

.my-masonry-grid_column > div {
  background: #f0f0f0;
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.my-masonry-grid_column > div h2 {
  margin-top: 0;
  color: #333;
  font-size: 1.2em;
}

.my-masonry-grid_column > div p {
  color: #666;
  font-size: 0.9em;
  line-height: 1.5;
}
*/

Example Code

Related Topics