<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 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"
];

function App() {
  return (
    <div class="container">
      <Masonry columnsCount={3} gutter={4}>
        {images.map((image) => (
          <img src={image} />
        ))}
      </Masonry>
    </div>
  );
}

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.