스택 레이아웃

<div class="frame">
  <div class="stack" id="stack" style="--space:8px">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
  <div class="tag" id="tag">--space: 8px</div>
</div>

.frame{display:flex;flex-direction:column;align-items:center;gap:8px}
.stack{display:flex;flex-direction:column;width:min(38vmin,200px)}
.stack > * + *{margin-block-start:var(--space)}
.item{background:var(--surface);border:1px solid var(--line);border-radius:8px;height:32px;
  display:grid;place-items:center;font-weight:800;color:var(--accent);transition:margin-block-start .6s}
.tag{font:700 clamp(9px,1.7vmin,11px)/1 ui-monospace,monospace;color:var(--accent-2);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px}

const stack = document.getElementById('stack');
const tag = document.getElementById('tag');
const spaces = [8, 18, 30, 14];
let i = 0;
setInterval(() => {
  const s = spaces[i % spaces.length];
  stack.style.setProperty('--space', s + 'px');
  tag.textContent = '--space: ' + s + 'px';
  i++;
}, 1600);