디자인 아틀라스
EN
▦ 레이아웃

클러스터 레이아웃

Cluster layout

너비가 제각각인 아이템(태그, 버튼)들을 균일한 간격으로 줄바꿈시키는 레이아웃 프리미티브. `flex-wrap` + `gap`이 전부입니다.

다른 이름: Every Layout Cluster
···
html
<div class="stage" id="stage">
  <div class="cluster">
    <span class="chip">Design</span><span class="chip">Frontend</span><span class="chip">Motion</span>
    <span class="chip">A11y</span><span class="chip">Typography</span><span class="chip">Color</span>
  </div>
</div>
css
.stage{width:46%;min-width:170px;max-width:92%;border:2px dashed var(--muted);border-radius:10px;padding:10px;
  transition:width 2.8s cubic-bezier(.4,0,.2,1);box-sizing:border-box}
.stage.wide{width:92%}
.cluster{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start}
.chip{padding:5px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:clamp(9px,1.8vmin,11px);
  font-weight:700;white-space:nowrap}
.chip:nth-child(even){background:var(--accent-3)}
js
const stage = document.getElementById('stage');
setInterval(() => stage.classList.toggle('wide'), 2200);

태그 목록이나 버튼 그룹처럼 "개수도 폭도 미리 알 수 없는" 아이템들을 다룰 때 흔히 겪는 문제가 있습니다. `inline-block` + `margin-right`로 만들면 줄이 바뀌는 지점의 세로 간격이 가로 간격과 달라지기 쉽고, 마지막 아이템에 불필요한 마진이 남습니다. `display: flex; flex-wrap: wrap; gap: var(--space)`는 이 문제를 한 줄로 없앱니다 — `gap`이 줄바꿈된 모든 방향에 똑같이 적용되기 때문입니다.

Every Layout에서는 여기에 `justify-content`와 `align-items: center`를 더해 "아이템들이 뭉치는(cluster) 방식"까지 규정합니다. 왼쪽 정렬로 뭉치게 할지, 가운데로 모을지는 콘텐츠 성격에 따라 다릅니다 — 필터 칩은 보통 왼쪽 정렬, 히어로 섹션의 CTA 버튼 그룹은 가운데 정렬이 자연스럽습니다.

아이템 폭을 고정하지 않는 게 핵심입니다. 각 아이템은 자기 콘텐츠(텍스트 길이)만큼만 차지하고, 컨테이너 폭이 좁아지면 자동으로 다음 줄로 넘어갑니다 — 몇 개가 한 줄에 들어갈지 계산할 필요가 전혀 없습니다.

언제 쓰나

필터 칩, 태그, 소셜 아이콘 줄, CTA 버튼 그룹처럼 폭이 콘텐츠에 따라 달라지는 여러 아이템을 한 덩어리로 보여줄 때 씁니다.