CodePen Embed - Masonry Grid Layout

<body class="align">

    <div class="grid">

      <div class="masonry js-masonry js-images-loaded">

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/1.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/1.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/2.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/2.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/3.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/3.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/4.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/4.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/5.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/5.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/6.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/6.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/7.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/7.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/8.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/8.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/9.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/9.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/10.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/10.jpg" alt="">
            </picture>
          </figure>
        </div>

        <div class="masonry__item js-masonry-item">
          <figure>
            <picture>
              <source srcset="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/11.webp" type="image/webp">
              <img src="https://cdn.rawgit.com/marcobiedermann/playground/master/ui/layout/masonry-layout/dist/content/images/11.jpg" alt="">
            </picture>
          </figure>
        </div>
      </div>

    </div>

  </body>

@use postcss-preset-env;

/* helpers/align.css */

.align {
  align-items: center;
  display: flex;
  justify-content: center;
}


/* helpers/grid.css */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  width: 90%;
}

/* layout/base.css */

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  padding-bottom: 10vmin;
  padding-top: 10vmin;
}

/* modules/figure.css */

figure {
  margin: 0;
}

/* modules/image.css */

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* vendor/masonry.css */

:root {
  --masonryGutter: 3%;
}

.masonry {
  margin: calc(var(--masonryGutter) * -1);
}

.masonry__item {
  margin: calc(var(--masonryGutter) / 2);
  width: calc(100% / 2 - var(--masonryGutter));
}

@media (min-width: 30em) {

  .masonry__item {
    width: calc(100% / 3 - var(--masonryGutter));
  }

}

@media (min-width: 48em) {

  .masonry__item {
    width: calc(100% / 4 - var(--masonryGutter));
  }

}

View Compiled

import masonryLayout from "https://cdn.skypack.dev/masonry-layout@4";
import imagesloaded from "https://cdn.skypack.dev/imagesloaded@4";

imagesLoaded('.js-images-loaded', () => {
  new Masonry(document.querySelector('.js-masonry'), {
    itemSelector: '.js-masonry-item'
  });
});

View Compiled

This Pen is owned by Marco Biedermann on CodePen.

See more by @marcobiedermann on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.