🟦 카드 열수 계산기 | 폭별 열 개수 바로 계산

컨테이너 폭 (px)

카드 최소 폭 (px)

카드 사이 갭 (px)

컨테이너 좌우 패딩 합 (px, 없으면 0)

비교할 컨테이너 폭 목록 (줄바꿈 또는 쉼표, 10 px 이상)

이 컨테이너 폭에 들어가는 열 수

카드 실제 폭 (1fr 균등, 소수 2자리)-

갭이 쓰는 폭 합계-

최소 폭 기준 남는 여백-

콘텐츠 영역 폭 (패딩 제외)-

폭 목록별 열 수

컨테이너 폭 (px)	열 수	카드 폭 (px)	남는 여백 (px)

붙여 쓰는 CSS

auto-fit 열 수를 미리 계산하는 방법

카드 목록을 repeat(auto-fit, minmax(...))로 깔면 브라우저가 열 수를 알아서 정합니다. 문제는 그 값을 눈으로 보기 전에는 모른다는 점입니다. 컨테이너 폭, 카드 최소 폭, 갭, 좌우 패딩을 넣으면 브라우저가 쓰는 것과 같은 식으로 열 수를 미리 구하고, 카드가 실제로 몇 px이 되는지와 최소 폭으로 깔았을 때 남는 여백까지 보여 줍니다. 비교할 폭을 여러 개 적으면 폭마다 열 수가 어디서 바뀌는지 한 표로 확인할 수 있습니다.

식은 열 수 = 내림((콘텐츠 폭 + 갭) ÷ (카드 최소 폭 + 갭))이고, 최소 1열입니다. 콘텐츠 폭은 컨테이너 폭에서 좌우 패딩 합을 뺀 값입니다. 카드 실제 폭은 (콘텐츠 폭 − 갭 합) ÷ 열 수로, 모든 열이 1fr로 균등한 경우입니다. 내림은 마지막 한 번만 적용하고 부동소수 오차를 흡수할 허용오차를 둡니다. 표시는 소수 2자리이며 CSS Grid 사양(W3C) 기준 2026년 10월에 확인했습니다.

이 도구는 열 수와 남는 여백만 계산합니다. 컬럼 폭·거터를 역산하는 12칼럼 그리드 계산이나 카드 몇 개가 보기 좋다는 권장안은 다루지 않습니다. auto-fill은 빈 트랙까지 만들어 열 수가 다르게 나오므로 이 계산은 auto-fit 기준입니다. 카드 내부 여백이나 글자 수에 따른 높이 변화도 지원하지 않습니다.

자주 묻는 질문

auto-fill로 바꾸면 결과가 달라질까?

달라집니다. auto-fill은 카드가 없는 빈 트랙도 만들어 두므로 실제 보이는 열 수가 이 계산과 다를 수 있습니다. 이 도구는 auto-fit 기준으로만 계산합니다.

남는 여백이 0 px으로 나오면 어떤 뜻일까?

카드를 최소 폭 그대로 깔았을 때 컨테이너가 빈틈 없이 꽉 찬다는 뜻입니다. 이때 카드 실제 폭은 최소 폭과 같아집니다.

컨테이너가 카드 최소 폭보다 좁으면 어떻게 될까?

열 수는 1열로 두고, 콘텐츠 영역이 몇 px 부족한지 따로 알려 줍니다. 실제 브라우저에서도 1열로 깔리면서 카드가 최소 폭보다 좁아집니다.

🟦카드 그리드 반응형 열수 계산기

관련된 도구

그리드 컬럼 너비 및 거터 계산기

그리드 컬럼 너비 계산기

auto-fit 열 수를 미리 계산하는 방법

자주 묻는 질문

관련된 도구

그리드 컬럼 너비 및 거터 계산기

그리드 컬럼 너비 계산기

auto-fit 열 수를 미리 계산하는 방법

자주 묻는 질문

같은 카테고리 도구