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

auto-fill vs auto-fit

`repeat(auto-fill, …)`은 빈 칸을 남겨두고, `repeat(auto-fit, …)`은 빈 칸을 접어 남은 아이템을 늘립니다 — 미디어 쿼리 없는 반응형 그리드의 핵심 차이.

다른 이름: repeat(auto-fill)repeat(auto-fit)
···
html
<div class="stage" id="stage">
  <div class="row">
    <b class="lbl">auto-fill</b>
    <div class="grid fill"><div class="cell">1</div><div class="cell">2</div><div class="cell">3</div></div>
  </div>
  <div class="row">
    <b class="lbl">auto-fit</b>
    <div class="grid fit"><div class="cell">1</div><div class="cell">2</div><div class="cell">3</div></div>
  </div>
</div>
css
.stage{width:44%;min-width:150px;max-width:92%;border:2px dashed var(--muted);border-radius:10px;padding:10px;
  transition:width 2.8s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
.stage.wide{width:92%}
.row{display:flex;flex-direction:column;gap:4px}
.lbl{font:700 clamp(9px,1.7vmin,11px)/1 ui-monospace,monospace;color:var(--muted)}
.grid{display:grid;gap:5px}
.fill{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
.fit{grid-template-columns:repeat(auto-fit,minmax(34px,1fr))}
.cell{height:26px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px}
.fill .cell{background:var(--accent)}
.fit .cell{background:var(--accent-3)}
js
const stage = document.getElementById('stage');
setInterval(() => stage.classList.toggle('wide'), 2400);

`grid-template-columns: repeat(auto-fill, minmax(70px, 1fr))`은 컨테이너 폭에 들어가는 만큼 칸을 최대한 만듭니다. 아이템이 3개뿐이어도 칸은 (컨테이너가 넓다면) 6개, 8개까지 만들어지고, 나머지 빈 칸들이 `1fr`만큼 공간을 나눠 가져가 버립니다. 그 결과 실제 아이템 3개는 자기 칸(`minmax`의 최소값 근처)에 머물고, 화면 오른쪽에는 보이지 않는 빈 칸들이 차지한 여백이 남습니다.

`auto-fit`은 똑같이 칸을 만들지만, 아이템이 없는 칸의 너비를 0으로 접어버립니다(`grid-template-columns`가 계산된 뒤 빈 트랙을 축소). 그러면 남는 공간이 전부 실제 아이템이 있는 칸으로 넘어가서, 아이템들이 `1fr`의 몫을 나눠 가지며 컨테이너 폭 전체로 늘어납니다.

즉 "칸이 남아야 하면 fill, 있는 아이템이 꽉 채워야 하면 fit"입니다. 아이템 개수가 칸 수보다 많아서 이미 줄바꿈이 일어나는 상황이라면 둘의 차이는 사라집니다 — 차이는 오직 "화면에 빈 칸이 생길 여유가 있을 때"만 보입니다.

언제 쓰나

카드 몇 개가 넓은 화면에서 왼쪽으로 몰리길 원하면 `auto-fill`, 남은 공간까지 꽉 채우길 원하면 `auto-fit`입니다. 대부분의 카드 그리드는 `auto-fit`이 기본값에 가깝습니다.