메이슨리

<div class="wall" id="wall"></div>

.wall{width:min(94%,560px);height:min(90%,340px);columns:3;column-gap:clamp(5px,1.4vmin,10px)}
.brick{break-inside:avoid;margin-bottom:clamp(5px,1.4vmin,10px);border-radius:8px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.06);transition:height .6s cubic-bezier(.2,.8,.2,1)}
.brick:nth-child(3n+1){background:color-mix(in oklab,var(--accent) 22%,var(--surface))}
.brick:nth-child(3n+2){background:color-mix(in oklab,var(--accent-3) 22%,var(--surface))}

const wall = document.getElementById('wall');
const heights = [46, 88, 64, 112, 54, 96, 70, 120, 58];
for (let i = 0; i < heights.length; i++) {
  const d = document.createElement('div');
  d.className = 'brick';
  d.style.height = heights[i] + 'px';
  wall.appendChild(d);
}
const bricks = () => wall.querySelectorAll('.brick');
setInterval(() => {
  const list = bricks();
  const target = list[Math.floor(Math.random() * list.length)];
  target.style.height = (40 + Math.floor(Math.random() * 100)) + 'px';
}, 900);