<h1>CSS Grid - Masonry Layout</h1>

<div class="grid">
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt, excepturi dolorem! A, recusandae error. Mollitia incidunt culpa inventore quae quis eveniet, similique ipsa, nisi, cum dolorum voluptas a sed.</p>
  </div>
<div class="content flow featured">
  <h2 class="title">This is really cool</h2>
  <img src="https://unsplash.it/500/200" alt="">
</div> 
<div class="content flow"> 
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <img src="https://unsplash.it/500/201" alt="">
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
  <h2 class="title">This is really cool</h2>
  <p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
  </div>
.grid {
  --gap: 1em;
  --columns: 4;
  max-width: 60rem;
  margin: 0 auto;
  display: column;
  columns: var(--columns);
  gap: var(--gap);
}

.grid > * {
  break-inside: avoid;
  margin-bottom: var(--gap);
}

@supports (grid-template-rows: masonry) {
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: masonry;
    grid-auto-flow: dense;
    /* align-tracks: stretch; */
  }

  .grid > * {
    margin-bottom: 0em;
  }
}

.featured {
  grid-column: span 2;
}

:root {
  --ff-primary: basic-sans, sans-serif;
  --clr-primary: #ee6352;
  --clr-body: #333;
  --clr-bg: #ddd;
  --spacer: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin: 3rem 0;
  text-align: center;
  font-size: clamp(2rem, 1rem + 3vw, 6rem);
  font-weight: 300;
  line-height: 1;
  opacity: 0.2;
}

.flow > * + * {
  margin-top: var(--flow-space, var(--spacer));
}

body {
  font-family: var(--ff-primary);
  min-height: 100vh;
  font-size: 1em;
  line-height: 1.6;
  color: var(--clr-body);
  background: var(--clr-bg);
  padding-bottom: 13rem;
}

a {
  color: var(--clr-primary);
}

img {
  max-width: 100%;
}

.content {
  padding: 2em;
  box-shadow: 0 0 3em rgba(0, 0, 0, 0.15);
  background: white;
}

.title {
  font-weight: 900;
  color: var(--clr-primary);
  line-height: 0.8;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.