DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

Responsive masonry layout for React

React Layout Masonry

Responsive masonry layout for React

React Layout Masonry is a flexible and customizable React component for creating dynamic and fixed/responsive masonry layouts.

View DemoView Github

Installation

You can install React Layout Masonry using npm, pnpm or yarn:

npm install react-layout-masonry
Enter fullscreen mode Exit fullscreen mode

or

pnpm install react-layout-masonry
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-layout-masonry
Enter fullscreen mode Exit fullscreen mode

Usage

Fixed Columns Layout

Here’s an example of how to use React Layout Masonry with a fixed number of columns in your React application:

import Masonry from 'react-layout-masonry';

const FixedColumnsMasonry = () => {
  return (
    <Masonry columns={3} gap={16}>
      {items.map((item) => {
        return <Item {...item}>
      })}
    </Masonry>
  );
};

export default FixedColumnsMasonry;
Enter fullscreen mode Exit fullscreen mode

Responsive Columns Layout

Here’s an example of how to use React Layout Masonry with responsive columns in your React application:

import Masonry from 'react-layout-masonry';

const ResponsiveColumnsMasonry = () => {
  return (
    <Masonry columns={{ 640: 1, 768: 2, 1024: 3, 1280: 5 }} gap={16}>
        {items.map((item) => {
        return <Item {...item}>
      })}
    </Masonry>
  );
};

export default ResponsiveColumnsMasonry;
Enter fullscreen mode Exit fullscreen mode

Column Props

The columnProps prop allows you to apply additional props to the container of each column. Here’s an example:

<Masonry
  columns={3}
  gap={16}
  columnProps={{
    className: 'custom-column',
    style: { backgroundColor: 'lightgray' },
  }}
>
  {/\* ... \*/}
</Masonry>
Enter fullscreen mode Exit fullscreen mode

Props

  • columns (number or object, required): The number of columns in the masonry layout, or an object with breakpoints and corresponding column counts.
  • gap (number, optional): The spacing between columns and rows in pixels. Defaults to 0.
  • columnProps (object, optional): Additional props to be applied to each column, such as className for styling.

Examples

For examples, usage and customization options, please refer to the stories directory in this repository.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more