css masonry - column count (not css grid)

by ian_smithz

HTML

<body class="bg--blue">
  <a href="https://github.com/jh3y/driveway"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 9999;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  <div class="dw">
    <div class="dw-pnl dw-pnl--fcs">
      <div class="dw-pnl__cntnt bd--white tx--white">
        <h1>Pure CSS masonry layout</h1>
      </div>
    </div>
    <div class="dw-pnl">
      <div class="dw-pnl__cntnt bd--white tx--white">
        <ul>
          <li>Configurable</li>
          <li>Responsive</li>
          <li>Supports clusters</li>
        </ul>
      </div>
    </div>
    <div class="dw-pnl "><img src="https://unsplash.it/419/?random" class="dw-pnl__cntnt"/>
    </div>
    <div class="dw-pnl ">
      <div class="dw-pnl__cntnt tx--white bd--white">
        <p>Phasellus malesuada, urna non auctor viverra, libero ex pellentesque urna, id rhoncus eros lacus tristique risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
      </div>
    </div>
    <div class="dw-pnl ">
      <img src="https://unsplash.it/445/?random" class="dw-pnl__cntnt"/>
    </div>
    <div class="dw-pnl ">
      <img src="https://unsplash.it/423/?random" class="dw-pnl__cntnt"/>
    </div>
    <div class="dw-pnl dw-clstr dw-clstr--hrz">
      <div class="dw-clstr__sgmnt dw-clstr__sgmnt--rw ">
        <div class="dw-pnl dw-clstr__sgmnt ">
          <div class="dw-pnl__cntnt bd--white tx--white">
            <h2>How</h2>
          </div>
        </div>
      </div>
      <div class="dw-clstr__sgmnt dw-clstr__sgmnt--rw ">
        <div class="dw-pnl dw-clstr__sgmnt ">
          <div class="dw-pnl__cntnt bd--white tx--white">
            <h2>about</h2>
         ...

CSS

.dw {
  -webkit-animation: fade 2s;
          animation: fade 2s;
}
.dw {
  box-sizing: border-box;
  -webkit-column-gap: 0;
          column-gap: 0;
  position: relative;
}
.dw * {
  box-sizing: border-box;
}
.dw__fcs-crtn {
  background-color: #000;
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0.75;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
}
@media (min-width: 768px) {
  .dw {
    -webkit-column-count: 2;
            column-count: 2;
  }
}
@media (min-width: 992px) {
  .dw {
    -webkit-column-count: 3;
            column-count: 3;
  }
}
@media (min-width: 1500px) {
  .dw {
    -webkit-column-count: 4;
            column-count: 4;
  }
}
.dw-pnl {
  margin: 0;
  padding: 5px;
}
.dw-pnl--fcs {
  position: relative;
}
.dw-pnl--fcs:hover {
  z-index: 3;
}
.dw-pnl--fcs:hover ~ .dw__fcs-crtn {
  display: block;
}
.dw-pnl--pls {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000;
          perspective: 1000;
  transition: -webkit-transform 0.25s ease 0s;
  transition: transform 0.25s ease 0s;
  transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
}
.dw-pnl--pls:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}
.dw-pnl__cntnt {
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .dw-pnl {
    -webkit-column-break-inside: avoid;
            break-inside: avoid;
  }
}
.dw-flp {
  -webkit-perspective: 1000;
          perspective: 1000;
}
.dw-flp:hover .dw-flp__cntnt {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.dw-flp--sm {
  height: 200px;
}
.dw-flp--md {
  height: 300px;
}
.dw-flp--lg {
  height: 400px;
}
.dw-flp__pnl {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 10px;
  height: 100%;
  left: 0;
  overflow: visible;
  padding: 20px;
  position: absolute;
  top: 0;
  width: 100%;
}
.dw-flp__pnl--frnt {
 ...