<div class="title">
  <h1>CSS-Only Masonry Layout</h1>
  <small>(No CSS Grid or Flexbox)</small>
  <hr>
</div>
<div class="container">
  <div class="item"><img src="https://placeimg.com/600/400/animals" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/arch" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/450/people" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/350/tech" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/800/animals/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/650/arch/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/300/nature/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/400/people/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/600/tech/grayscale" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/200/animals/sepia" alt=""></div>
  <div class="item"><img src="https://placeimg.com/600/700/arch/grayscale" alt=""></div>
</div>

.title {
  text-align: center;
  margin: 0 1rem;
}

.container {
  // Mobile-first column count, we'll add responsive styles in a bit
  column-count: 1;
  column-gap: 20px;
  column-fill: balance;
  margin: 20px auto 0;
  padding: 2rem;

  .item {
    display: inline-block;
    margin: 0 0 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 100%;
    
    img {
      width: 100%;
      height: auto;
    }
  }

  // Add your media query breakpoints for when to expand the columns
  @media (min-width: 600px) {
    column-count: 2;
  }

  @media (min-width: 900px) {
    column-count: 3;
  }
  
  @media (min-width: 1200px) {
    column-count: 4;
  }
}