react-responsive-masonry

To create a masonry layout where the number of columns and the gutter size change based on the window size, you must wrap the Masonry component with the ResponsiveMasonry component.

If you want a static layout where the column count remains constant regardless of screen size, use the Masonry component alone.

Responsive Layout Example

import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const MyWrapper = () => (
    <ResponsiveMasonry
        columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
        gutterBreakPoints={{350: "12px", 750: "16px", 900: "24px"}}
    >
        <Masonry>
            <ChildA />
            <ChildB />
            <ChildY />
            <ChildZ />
        </Masonry>
    </ResponsiveMasonry>
)

Static Layout Example

import React from "react"
import Masonry from "react-responsive-masonry"

const MyWrapper = () => (
    <Masonry columnsCount={3}>
        <ChildA />
        <ChildB />
        <ChildY />
        <ChildZ />
    </Masonry>
)

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 (
            <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
                gutterBreakPoints={{350: "12px", 750: "16px", 900: "24px"}}
            >
                <Masonry>
                    <ChildA />
                    <ChildB />
                    {/* Children */}
                    <ChildY />
                    <ChildZ />
                </Masonry>
            </ResponsiveMasonry>
        )
    }
}

// The number of columns and the gutter don't change by resizing the window
class MyWrapper extends Component {
    render() {
        return (
            <Masonry columnsCount={3}>
                <ChildA />
                <ChildB />
                {/* Children */}
                <ChildY />
                <ChildZ />
            </Masonry>
        )
    }
}

The Masonry component from react-responsive-masonry allows you to create a masonry layout for your items. You can specify the number of columns using the columnsCount prop and the spacing between items using the gutter prop.

Note: In the basic Masonry component, the columnsCount does not change dynamically; it remains fixed to the value provided.

import React from "react"
import Masonry from "react-responsive-masonry"

const images = [
    "https://picsum.photos/200/300?image=1050",
    //...
    "https://picsum.photos/300/300?image=206",
]

class MyWrapper extends React.Component {
    render() {
        return (
            <Masonry columnsCount={3} gutter="10px">
                {images.map((image, i) => (
                    <img
                        key={i}
                        src={image}
                        style={{width: "100%", display: "block"}}
                    />
                ))}
            </Masonry>
        )
    }
}

To create a masonry layout where the number of columns and the gutter size change dynamically based on the viewport width, wrap a Masonry component with the ResponsiveMasonry component.

ResponsiveMasonry acts as a provider that injects responsive configuration into its child Masonry component using the following props:

• columnsCountBreakPoints: An object where keys are viewport widths (in pixels) and values are the number of columns to display at that width or larger.
• gutterBreakPoints: An object where keys are viewport widths (in pixels) and values are the CSS gutter size (e.g., '5px', '1rem') to apply at that width or larger.

import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const images = [
    "https://picsum.photos/200/300?image=1050",
    //...
    "https://picsum.photos/300/300?image=206",
]

class MyWrapper extends React.Component {
    render() {
        return (
            <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
                gutterBreakPoints={{350: "5px", 750: "16px", 900: "2rem"}}
            >
                <Masonry>
                    {images.map((image, i) => (
                        <img
                            key={i}
                            src={image}
                            style={{width: "100%", display: "block"}}
                            alt=""
                        />
                    ))}
                </Masonry>
            </ResponsiveMasonry>
        )
    }
}

The Masonry component accepts the following props to control its layout and appearance: