<div class="container">
  <header>
    <h1>Masonry grid with CSS part II</h1>
    <p>Goodbye JavaScript, let's embrace this beautiful CSS feature!</p>
    <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>
  </header>
  <section class="grid">
    <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 class="featured">
      <img src="https://unsplash.it/1500/800" 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/1500/800" alt="but unforunatly, these images are random" />
    </figure>
    <figure class="featured big">
      <img src="https://unsplash.it/1600/1200" alt="which makes it hard" />
    </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>
  </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;
}

a {
  color: #FFF;
}

.container {
  max-width: 1800px;
  margin: 0 auto;
}

/* The masonry grid */
.grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(1, 1fr);
}

figure {
  margin: 0;
  display: block;
  line-height: 1;
}

figure > img {
  display: block;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  /* set the grid to 2 columns */
  .grid {  
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: masonry;
  }
  
  /* set our featured images bigger */
  .featured {
    grid-column: span 2;
  }
}

@media screen and (min-width: 1200px) {
  /* set the grid to 3 columns */
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .featured.big {
    grid-column: span 3;
  }
}