css-grid-3/examples/fragmentation-inline-axis-example.html

<!DOCTYPE HTML>

<style>
.columns {
  columns: 3;
  column-fill: auto;
  height: 100px;
  transition: height 2s linear;
  background: lightgrey;
}

.grid {
  display: grid;
  grid: 20px auto 30px / masonry;
  border: 1px solid;
  gap: 10px;
}

.grid > * {
  background: cyan;
  width: 20px;
  min-height: 10px;
}
.grid > :nth-child(4n) {
  background: blue;
  width: 60px;
}
.grid > :nth-child(3n) {
  background: lime;
  width: 40px;
}
</style>

<body onload="[...document.querySelectorAll('.columns')].forEach(e=>e.style.height='40px')">
<div class=columns>
  <div class="grid">
    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
  </div>
</div>

</body>
</html>