6XC

그리드 컬럼 계산기

컨테이너 너비, 컬럼 수, 거터를 입력하면 컬럼 너비를 계산 — 바로 복사할 수 있는 CSS 그리드 코드와 다중 컬럼 스팬 크기까지 함께 제공합니다.

조회수 1,137회

컬럼 계산 공식

컬럼 = (컨테이너 − (컬럼수−1) × 거터) ÷ 컬럼수. 1200px 컨테이너에 12개 컬럼, 24px 거터를 적용하면 컬럼 너비는 78px가 됩니다. 4개 컬럼에 걸친 요소는 4×78 + 3×24 = 384px입니다. 이 도구는 모든 스팬 너비를 나열해 디자인 파일에 정확한 크기를 그대로 옮길 수 있게 해줍니다.

CSS에서는 이런 값을 직접 하드코딩하는 경우가 드뭅니다: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px처럼 작성하면 브라우저가 나눗셈을 대신 처리합니다. 픽셀 값은 Figma 프레임, 이미지 내보내기, 그리고 브레이크포인트에서 1fr이 실제로 몇 px로 해석되는지 이해하는 데 중요합니다.

자주 묻는 질문

컨테이너 너비에 마진을 포함해야 하나요?

아니요 — 콘텐츠 너비(컨테이너에서 좌우 마진/패딩을 뺀 값)를 입력하세요. 1440px 디자인에서 양쪽에 120px씩 마진이 있다면 작업 컨테이너는 1200px입니다.

컬럼은 꼭 12개여야 하나요?

12는 2, 3, 4, 6으로 나누어떨어지기 때문에 기본값이 되었습니다. 밀도 높은 대시보드는 24를 쓰기도 하고, 단순한 마케팅 페이지는 6이나 4로도 충분합니다.

댓글

아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기