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

  }

}