<div id="app"></div>
/* Important for images to be displayed correctly */
img {
  width: 100%;
}

/* Style for the example */

body {
  background: #f6f6f8;
}

.container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
}
import React from "https://cdn.skypack.dev/react@^16.13.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@^16.13.1";
import Masonry, {
  ResponsiveMasonry
} from "https://cdn.skypack.dev/react-responsive-masonry@2.1.0";

const images = [
  "https://cdn.pixabay.com/photo/2020/11/01/19/41/autumn-5704791_1280.jpg",
  "https://cdn.pixabay.com/photo/2020/07/27/02/30/hands-5441201_1280.jpg",
  "https://cdn.pixabay.com/photo/2020/11/08/09/41/deer-5723225_1280.jpg",
  "https://cdn.pixabay.com/photo/2020/11/15/22/08/person-5747420_960_720.jpg",
  "https://cdn.pixabay.com/photo/2020/09/27/04/15/cat-5605615_960_720.jpg",
  "https://cdn.pixabay.com/photo/2020/03/14/21/56/wine-4931923_1280.jpg",
  "https://cdn.pixabay.com/photo/2020/04/19/12/26/thread-5063401_1280.jpg",
  "https://cdn.pixabay.com/photo/2020/07/11/11/34/mam-tor-5393685_1280.jpg",

  "https://cdn.pixabay.com/photo/2020/07/03/14/43/waterdrops-5366584_1280.jpg"
];

const columnsCountBreakPoints = { 350: 1, 750: 2, 900: 3 };

function App() {
  return (
    <ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
      <Masonry gutter={4}>
        {images.map((image) => (
          <img src={image} />
        ))}
      </Masonry>
    </ResponsiveMasonry>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.