05 — Intrinsic Sizing (minmax / min-content / max-content / auto-fill vs auto-fit)

이 문서가 답하는 질문: minmax, min-content, max-content, auto-fill, auto-fit은 각각 어떤 사이징 문제를 푸는가?

한 줄 답

Intrinsic sizing은 콘텐츠 자체의 크기를 기준으로 트랙·박스를 정하는 키워드들이다. auto-fill은 빈 트랙도 만들고 유지, auto-fit은 빈 트랙을 0으로 접고 채운 트랙이 늘어남. 카드 그리드의 동작이 완전히 다르다.

Why — 왜 콘텐츠 기반 사이징인가

CSS 2.1의 사이징은 부모 기준(percentage)과 고정값(px) 둘뿐이었다. 콘텐츠 자체를 기준으로 크기를 정할 방법이 없었다.

문제는 흔하다:

“버튼은 텍스트만큼만 — 더 작게도, 더 크게도” → max-content 또는 fit-content.
“이 컬럼은 가장 긴 단어 폭은 보장” → min-content.
“카드는 200~300px 사이에서 가변” → minmax(200px, 300px).
“화면 폭에 따라 카드 개수가 자동” → repeat(auto-fill, minmax(200px, 1fr)).

Intrinsic sizing은 이 모두를 선언적으로 표현한다. JS 측정 없이.

How — 각 키워드의 정의

1) min-content / max-content

min-content: 콘텐츠가 깨지지 않을 최소 폭 (가장 긴 단어, 이미지 intrinsic width, white-space: nowrap 텍스트 전체).
max-content: 줄바꿈 없이 한 줄로 펼친 폭.

.column {
  width: min-content;  /* 가장 긴 단어 폭 */
  /* 또는 */
  width: max-content;  /* 한 줄 전체 폭 */
}

2) fit-content

fit-content(<length>) = min(max-content, max(min-content, <length>))

읽으면: “min-content 이상, max-content 이하, 가능하면 length”.

.box { width: fit-content(300px); }
/* 콘텐츠가 100px면 100px (= min-content), 200px면 200px, 400px면 300px (clamp). */

3) minmax

grid-template-columns: minmax(200px, 1fr);
/* 최소 200px, 최대 1fr (남은 공간) */
 
grid-template-rows: minmax(min-content, 80px);
/* 콘텐츠 최소 보장, 최대 80px */
 
grid-template-columns: minmax(0, 1fr);
/* 균등 강제 — 03번 문서의 함정 해결 */

조건: max >= min. max가 min보다 작으면 min이 우선.

4) repeat() + auto-fill / auto-fit

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

이 한 줄이 반응형 카드 그리드의 사실상 표준.

키워드	동작	카드 1개일 때
`auto-fill`	폭에 맞게 트랙을 최대한 만들고, 빈 트랙도 유지	카드는 200~~300px, 나머지는 빈 트랙
`auto-fit`	폭에 맞게 트랙을 만들되, 빈 트랙은 0으로 접음	채운 트랙이 1fr을 모두 가져감 → 카드가 100% 폭

What — 사이징 키워드 표

키워드	컨텍스트	의미
`auto`	모든 곳	기본 — 컨텍스트에 따라 다름
`min-content`	width/height/track	콘텐츠 깨지지 않을 최소
`max-content`	width/height/track	줄바꿈 없는 최대
`fit-content(<length>)`	width/track	clamp(min-content, length, max-content)
`fit-content` (단독)	width	`fit-content(stretch)` 별칭
`minmax(min, max)`	track	트랙 범위
`repeat(auto-fill, …)`	track	폭에 맞춰 채움, 빈 트랙 유지
`repeat(auto-fit, …)`	track	폭에 맞춰 채움, 빈 트랙 접음
`<length>fr`	track	남은 공간 비율
`stretch`	sizing	부모 contain 전체 차지 (2024+ 표준)

`auto-fill` vs `auto-fit` 의사결정

What-if — 잘못 쓰면

1) `auto-fit`으로 카드 1개일 때 카드가 화면 전체를 덮는다

원인: auto-fit이 빈 트랙을 0으로 접고, 남은 1fr 공간을 채운 트랙이 모두 가져감.

해결:

의도면 OK.
카드 폭을 디자인 시스템 최대치로 제한하려면 minmax(200px, 400px) 같이 max도 고정.
또는 auto-fill로 전환.

2) `min-content`로 컬럼을 만들었더니 항목이 깨진다

원인: min-content는 콘텐츠가 깨지지 않을 최소이지, 바람직한 최소가 아니다. 긴 영어 단어, URL 등이 컬럼을 강제로 늘림.

해결:

.cell {
  overflow-wrap: anywhere; /* 또는 break-word */
  word-break: break-word;
}

또는 min-content 대신 minmax(0, …) + ellipsis.

3) `fit-content(300px)`인데 텍스트가 300px를 넘는다

원인: min-content가 300px보다 클 때 (긴 단어, nowrap). fit-content는 clamp가 아니라 내부 최소 보장.

해결: 콘텐츠를 더 작게 (개행, break-word) 만들거나, max-width: 300px로 강제.

4) `minmax(200px, 1fr)`인데 200px가 안 지켜진다

원인: 컨테이너 폭이 200px×트랙 수보다 작아 overflow. minmax는 컨테이너 폭을 넘더라도 min을 지킴 → 가로 스크롤.

해결: 컨테이너 폭 점검, 또는 min을 줄임.

5) `auto-fill` 그리드에 항목이 적어도 빈 트랙이 생긴다

원인: 의도된 동작 — auto-fill은 빈 트랙을 만든다.

해결: 빈 트랙이 싫으면 auto-fit. 그러나 카드 폭이 디자인 토큰을 깨는 부작용을 받아들여야 함.

Insight — `auto-fill`/`auto-fit`의 명명 혼동

스펙 작성자도 인정한 점 — 이름이 직관과 반대다.

fill (채우다)이 빈 칸을 채워서 유지한다는 의미.
fit (맞추다)이 콘텐츠에 맞춰 빈 칸을 없앤다는 의미.

많은 사람이 *“fit이 화면에 fit하니까 빈 칸을 채우지 않을까?”*라고 오해한다. 실제로는 반대.

기억 트릭: “fit은 콘텐츠에 fit해서 빈 트랙을 접는다(collapse)“.

intrinsic sizing의 깊은 영향

CSS의 모든 인트린식 사이징은 이 키워드들 위에 쌓여있다.

flex-basis: max-content (자주 안 쓰지만 유효)
width: fit-content (배지·태그의 콘텐츠 폭 + 패딩)
aspect-ratio + width: 100% 조합
Container query units (cqi, cqb)는 컨테이너의 intrinsic 폭을 기준으로 함

흥미: aspect-ratio: 16/9 박스에 콘텐츠가 들어와서 그 비율보다 커지면, 콘텐츠 min-content가 비율보다 우선한다. 이게 *“aspect-ratio가 안 먹는다”*의 가장 흔한 원인 — min-width: 0 또는 overflow: hidden으로 가둬야 한다.

역사적 노트

min-content / max-content는 CSS Sizing Module Level 3에 정의되어 있고, Chrome 46(2015), Firefox 66(2019), Safari 11(2017) 부터 안정. fit-content() 함수형은 더 늦게(Safari 14, 2021) 들어왔다.

auto-fill/auto-fit은 Grid 1과 함께 2017년 출시. 그 이전 *“화면 폭에 따라 카드 수가 변하는 그리드”*는 미디어 쿼리로 5단계 분기를 직접 짜야 했다 — 한 줄로 줄어든 게 Grid의 가장 가시적인 승리.

요약 + Mermaid

min-content / max-content — 콘텐츠 기반 최소/최대.
fit-content(length) — clamp(min-content, length, max-content).
minmax(min, max) — 트랙 범위. minmax(0, 1fr)이 균등 강제 패턴.
auto-fill — 빈 트랙 유지. auto-fit — 빈 트랙 접고 채운 트랙이 확장.
카드 1개 화면 전체 덮음 = auto-fit의 의도된 동작 (또는 버그로 인식).

다음: 06-subgrid — Subgrid와 Masonry.

04 — Grid Placement 06 — Subgrid & Masonry