카드가 두 개뿐일 때 화면 전체로 늘어난 이유 — auto-fit과 auto-fill

문제 발생

반응형 카드 그리드를 흔한 한 줄로 만들었습니다.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

카드가 6개일 때는 좋았는데, 2개만 남으면 두 카드가 화면 절반씩 차지하며 거대해졌습니다. auto-fit을 auto-fill로 바꾸자 원래 크기를 유지했습니다.

원인 분석

두 키워드는 빈 트랙을 어떻게 처리하는지만 다릅니다.

MDN은 auto-fill을 이렇게 정의합니다 — 공간을 채우도록 반복하는 자동 반복자. 콘텐츠 박스에 최대 크기가 있으면 넘치지 않는 최대 반복 횟수로, 최소 크기만 있으면 그 최소를 만족하는 최소 반복 횟수로 해석됩니다.

auto-fit은 그 위에 한 단계가 더 있습니다 — auto-fill과 동일하게 동작하되, 그리드 아이템을 배치한 뒤 비어 있는 반복 트랙을 접습니다(collapse). 그리고 접힌 트랙은 0px 고정 크기 트랙으로 취급되며 양옆의 간격도 함께 접힙니다.

그래서 1200px 화면에서 240px 최소 폭이면 트랙이 4개 만들어지는데, 카드가 2개면

• auto-fill: 트랙 4개 유지 → 카드 2개는 원래 크기, 오른쪽은 빈 자리
• auto-fit: 빈 트랙 2개가 0px로 접힘 → 남은 2개가 1fr로 전체를 나눠 가짐

둘 다 정상 동작입니다. 원하는 그림이 무엇인지의 문제입니다.

해결 방안

1. 의도에 맞는 쪽을 고릅니다. 항목이 적을 때 넓게 퍼지길 원하면 auto-fit, 카드 크기를 유지하고 왼쪽 정렬로 두려면 auto-fill입니다.

2. auto-fit으로 늘어나는 폭에 상한을 둡니다. 1fr 대신 최대치를 지정하면 두 카드가 화면을 갈라 먹는 일이 없어집니다.

grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
justify-content: start;

3. 좁은 화면의 넘침을 확인합니다. 최소값이 컨테이너보다 크면 가로 스크롤이 생깁니다. minmax(min(240px, 100%), 1fr)가 흔한 처방입니다.

4. 한 선언에서 자동 반복을 섞지 않습니다. MDN이 명시하듯 자동 반복(auto-fill/auto-fit)은 완전한 내재적 크기나 유연한 크기와 결합할 수 없고, 자동 반복자를 쓰면 추가 repeat()는 고정 반복만 허용됩니다.

5. 실제 아이템 수로 테스트합니다. 이 차이는 목록이 가득 찼을 때 전혀 보이지 않습니다. 1개, 2개, 0개일 때를 반드시 확인합니다.

공식 문서

• MDN: repeat()
• MDN: minmax()