<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');
}