<div class="container">

  <header>

    <h1>Masonry grid with CSS and fallback</h1>

    <p>Let's use Masonry with CSS now and have a fallback</p>

  </header>

  <section class="grid">

    <main class="text-box grid-item">

      <h2>Just a test with firefox nightly</h2>

      <p><a href="https://utilitybend.com/blog/masonry-with-css-grid-finally-a-solution-without-javascript" target="_blank">Read more about it on my blog</a></p>

      <p>This is a test for the css grid masonry, to see this, you will need to use firefox nightly and have the <strong>layout.css.grid-template-masonry-value</strong> set to enabled. In this test, I'm trying to make a real example where you might want to change the order ofthe masonry based on viewport.</p>

    </main>

    <figure class="grid-item">

      <img src="https://unsplash.it/800/600/?random" alt="some random image that is way too big for this" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/800/600/" alt="they could have used srcsets, but hey, that's not the point of this." />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/900/600" alt="never forget your alt tags folks!" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/1600/900" alt="because alt tags are important" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/1200/1600" alt="they improve accessibility" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/800/600" alt="and should be a good description" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/640/640" alt="but unforunatly, these images are random" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/900/600" alt="and i have no idea what's on them" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/1500/800" alt="maybe one day i'll get a pro account on codepen" />

    </figure>

    <figure class="grid-item">

      <img src="https://unsplash.it/800/600" alt="and add decent alt attributes instead" />

    </figure>

  </section>

</div>

/* Some default styling first */

* {

  box-sizing: border-box;

}

​

body {

  font-family: 'Lato', sans-serif;

  font-size: 1.2rem;

  line-height: 1.5;

  color: #FEFEFE;

  background: #1f2937;

}

​

header {

  padding: 48px 0 48px 24px;

  font-size: 1.5rem;

}

​

h1, h2 {

  margin: 0;

  font-family: 'Merriweather', serif;

  font-size: 2rem;

}

​

h2 {

  margin: 0 0 16px 0;

  font-size: 1.7rem;

}

​

p {

  margin: 0 0 16px 0;

}

​

.container {

  max-width: 1800px;

  margin: 0 auto;

}

​

/* The masonry grid */

​

.grid-item {

  width: calc(33.33% - 3px);

}

​

@supports (grid-template-rows: masonry) {

  .grid {

    display: grid;

    gap: 5px;

    grid-template-columns: repeat(1, 1fr);

    grid-template-rows: masonry;

  }

  .grid-item {

    width: auto;

  }

}

​

​

figure {

  margin: 0;

  display: block;

  line-height: 1;

}

​

figure > img {

  display: block;

  max-width: 100%;

}

​

.text-box {

  padding: 24px;

  color: #121212;

  background: #FFF;

  box-shadow: 0 0 10px 3px rgba(0,0,0,0.07); 

}

​

​

@media screen and (min-width: 768px) {

  /* set the grid to 2 columns */

  .grid {  

    grid-template-columns: repeat(2, 1fr);

  }

}

​

@media screen and (min-width: 1200px) {

  header {

    text-align: center;

  }

  /* set the grid to 3 columns */

  .grid {

    grid-template-columns: repeat(3, 1fr);

  }

  /* change order of the masonry grid to have our key text in the center of the page */

  figure:first-of-type {

    order: 1;

  }

  .text-box {

    order: 2;

  }

  figure {

    order: 3;

  }

}

const supportGrid = CSS.supports("grid-template-rows", "masonry");

​

if (!supportGrid) {

  console.log('%cfalling back to jQuery Masonry','color: red; font-family:serif; font-size: 20px');

  const colWidth = $(".grid-item").outerWidth();

​

  window.onresize = function(){

    const colWidth = $(".grid-item").outerWidth();

  }

​

  const $grid = $(".grid").masonry({

    // options

    itemSelector: ".grid-item",

    columnWidth: colWidth,

    gutter: 5,

    percentPosition: true

  });

​

  $grid.imagesLoaded().progress(function() {

    $grid.masonry("layout");

  });

} else {

  console.log('%cCSS Grid Masonry!','color: green; font-family:serif; font-size: 20px');

}