<div class="container">
  <header>
    <h1>Masonry grid with CSS</h1>
    <p>Goodbye JavaScript, let's embrace this beautiful CSS feature!</p>
  </header>
  <section class="grid">
    <main class="text-box">
      <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>
      <img src="https://unsplash.it/800/600/?random" alt="some random image that is way too big for this" />
    </figure>
    <figure>
      <img src="https://unsplash.it/800/600/" alt="they could have used srcsets, but hey, that's not the point of this." />
    </figure>
    <figure>
      <img src="https://unsplash.it/900/600" alt="never forget your alt tags folks!" />
    </figure>
    <figure>
      <img src="https://unsplash.it/1600/900" alt="because alt tags are important" />
    </figure>
    <figure>
      <img src="https://unsplash.it/1200/1600" alt="they improve accessibility" />
    </figure>
    <figure>
      <img src="https://unsplash.it/800/600" alt="and should be a good description" />
    </figure>
    <figure>
      <img src="https://unsplash.it/640/640" alt="but unforunatly, these images are random" />
    </figure>
    <figure>
      <img src="https://unsplash.it/900/600" alt="and i have no idea what's on them" />
    </figure>
    <figure>
      <img src="https://unsplash.it/1500/800" alt="maybe one day i'll get a pro account on codepen" />
    </figure>
    <figure>
      <img src="https://unsplash.it/800/600" alt="and add decent alt attributes instead" />
    </figure>
  </section>
</div>

/* Some default styling first */
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 {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: masonry;
}

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