liminfo

CSS Grid Calculator

CSS 그리드/레이아웃 코드 생성기

CSS 출력

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;

열 너비: ~389px

미리보기

1
2
3
4
5
6

CSS Grid Calculator 소개

CSS Grid 계산기는 컨테이너 너비, 열 수, 픽셀 단위 간격을 입력하면 각 열의 정확한 너비를 계산해 주는 도구입니다. 열(1~12), 간격(px), 컨테이너 너비(px) 세 가지 값을 입력하면 공식 — 열 너비 = (컨테이너 - 간격 × (열 수 - 1)) / 열 수 — 을 적용하여 픽셀값과 함께 바로 사용 가능한 grid-template-columns CSS 문자열을 출력합니다.

이 도구는 1200px 컨테이너를 24px 간격으로 4열로 나눠야 하는 등 정확한 픽셀 치수가 명시된 디자인을 다룰 때 특히 유용합니다. 수동 계산이나 테스트 CSS 작성 없이 즉시 답을 얻을 수 있고, 체크박스 하나로 유연한 레이아웃용 fr 단위와 고정 너비 레이아웃용 px 단위를 전환할 수 있습니다.

디자이너와 개발자는 Figma나 Sketch 디자인 스펙을 코드로 변환할 때, 그리드 시스템의 수학적 일관성을 검증할 때, 표준화된 열 너비를 가진 디자인 시스템을 계획할 때 이 도구를 활용합니다. 실시간 미리보기는 계산된 열 수로 2행 샘플 그리드를 보여주어 구현 전에 레이아웃을 시각적으로 확인할 수 있습니다.

주요 기능

  • (컨테이너 - 간격 × (열 수-1)) / 열 수 공식으로 정확한 열 너비 계산
  • 표준·커스텀 그리드 시스템을 위한 1~12열 입력
  • 디자인 스펙과 정확히 일치하는 픽셀 단위 간격 입력
  • 레이아웃 max-width 또는 브레이크포인트 너비를 맞추는 컨테이너 너비 입력
  • 유연한 레이아웃용 fr 단위(repeat(N, 1fr))와 고정 너비용 px 단위 전환 체크박스
  • CSS 출력과 함께 열당 픽셀 너비 수치를 별도로 표시
  • 레이아웃을 시각적으로 확인하는 2행 샘플 셀의 실시간 그리드 미리보기
  • grid-template-columns 값 전체를 클립보드에 복사하는 원클릭 CSS 복사

자주 묻는 질문

CSS Grid 계산기는 어떤 공식을 사용하나요?

열 너비 = (컨테이너 너비 - 간격 × (열 수 - 1)) / 열 수 공식을 사용합니다. 예를 들어 1200px 컨테이너에 3열 24px 간격이면 (1200 - 24 × 2) / 3 = (1200 - 48) / 3 = 384px가 됩니다.

fr 단위와 px 단위 중 어느 것을 써야 하나요?

열이 컨테이너 너비에 비례해 유연하게 늘어나기를 원할 때는 fr 단위(repeat(3, 1fr))를 사용하세요. 인쇄 레이아웃, 고정 너비 이메일 템플릿, 픽셀 단위 디자인 목업을 그대로 구현해야 할 때처럼 정확한 픽셀 너비가 필요한 경우에는 px 단위가 적합합니다.

컨테이너 너비에는 어떤 값을 입력해야 하나요?

그리드를 담을 요소의 CSS max-width나 width 값을 입력하세요. 일반적으로 페이지 래퍼나 콘텐츠 컨테이너이며, 1200px, 1440px, 768px(태블릿 브레이크포인트) 등이 흔히 사용됩니다. 계산기는 컨테이너 너비를 사용 가능한 콘텐츠 영역으로 가정하므로 패딩은 미리 빼고 입력하세요.

간격 값은 무엇을 의미하나요?

인접한 열 사이의 픽셀 공간(CSS의 column-gap)을 의미합니다. CSS에서 gap 또는 column-gap 속성에 전달할 값과 동일합니다. 행과 열 간격이 다른 경우 이 계산기는 열 너비 계산에만 집중하므로 열 간격만 입력하면 됩니다.

CSS Grid 플레이그라운드와 어떻게 다른가요?

CSS Grid 플레이그라운드는 슬라이더로 그리드 레이아웃을 시각적으로 탐색하는 도구입니다. CSS Grid 계산기는 정확한 치수를 입력하면 정확한 열 너비와 CSS를 반환하는 산술 도구입니다. 디자인 스펙을 코드로 변환할 때는 계산기를, 그리드 옵션을 시각적으로 탐색할 때는 플레이그라운드를 사용하세요.

계산 결과가 브라우저 레이아웃과 다른 이유는 무엇인가요?

가장 흔한 원인은 컨테이너 너비에 패딩이 포함된 경우입니다. CSS box-sizing: border-box는 패딩을 선언된 너비에 포함시키므로 실제 콘텐츠 영역은 더 좁습니다. 정확한 결과를 얻으려면 컨테이너 너비에서 수평 패딩을 뺀 값을 입력하세요.

출력된 CSS를 CSS-in-JS나 styled-components에서 사용할 수 있나요?

네. 생성된 grid-template-columns 값은 일반 CSS 파일, 인라인 스타일, styled-components 템플릿 리터럴, Tailwind 임의값(grid-cols-[repeat(4,_273px)]) 등 어느 환경에서든 사용할 수 있는 표준 CSS 문자열입니다.

1200px 너비 웹사이트의 일반적인 그리드 시스템은 어떻게 되나요?

1200px에서 흔히 쓰이는 12열 그리드는 24px 간격일 때 (1200 - 24 × 11) / 12 = 78px/열이 됩니다. Bootstrap 그리드는 30px 거터를 사용합니다. 32px 간격의 3열 레이아웃이라면 (1200 - 64) / 3 = 약 379px/열입니다.