거터

<div class="stage">
  <div class="cols" id="cols"></div>
  <div class="readout" id="readout">gap: 24px</div>
</div>

.stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(92%,480px)}
.cols{display:grid;grid-template-columns:repeat(6,1fr);width:100%;height:min(58vmin,170px)}
.cols b{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.cols b:nth-child(odd){background:color-mix(in oklab,var(--accent) 16%,var(--surface))}
.readout{font-family:ui-monospace,monospace;font-size:clamp(11px,2vmin,14px);color:var(--muted)}

const cols = document.getElementById('cols');
const readout = document.getElementById('readout');
for (let i = 0; i < 6; i++) cols.appendChild(document.createElement('b'));
const values = [4, 24, 44, 24];
let i = 0;
function apply() {
  const v = values[i % values.length];
  cols.style.gap = v + 'px';
  readout.textContent = 'gap: ' + v + 'px';
  i++;
}
apply();
setInterval(apply, 1300);