📊그리드 컬럼 너비 계산기

컨테이너 너비, 컬럼 수, 거터 크기를 입력하면 컬럼 너비를 자동 계산합니다.

컨테이너 너비

px

컬럼 수

컬럼

거터 크기 (컬럼 간 간격)

px

그리드 시스템이란?

그리드 시스템은 레이아웃을 일정한 컬럼과 거터로 나누어 시각적 일관성을 만드는 디자인 기법입니다. 웹 디자인에서는 12컬럼 그리드가 가장 널리 사용되며, 다양한 디바이스에서 유연하게 레이아웃을 조정할 수 있는 기반이 됩니다.

컬럼 너비 계산 공식

컬럼 너비 = (컨테이너 너비 - 거터 × (컬럼 수 - 1)) ÷ 컬럼 수입니다. 예를 들어 1200px 컨테이너, 12컬럼, 24px 거터라면 (1200 - 24 × 11) ÷ 12 = (1200 - 264) ÷ 12 = 936 ÷ 12 = 78px가 컬럼 너비입니다.

CSS Grid 적용 팁

CSS Grid를 사용할 때는 grid-template-columns: repeat(12, 1fr); gap: 24px; 로 설정하면 브라우저가 자동으로 컬럼 너비를 계산합니다. fr 단위를 사용하면 계산 없이도 균등한 컬럼을 만들 수 있으며, gap 속성으로 거터를 간단하게 설정할 수 있습니다.

자주 묻는 질문

12컬럼이 가장 많이 쓰이는 이유는?

12는 2, 3, 4, 6으로 균등하게 나누어지는 숫자입니다. 따라서 전체 너비, 절반, 3분의 1, 4분의 1 등 다양한 레이아웃을 쉽게 만들 수 있어 가장 유연한 그리드 시스템입니다.

거터 크기는 어떻게 정하나요?

8pt 그리드 시스템을 사용한다면 8의 배수(8, 16, 24, 32px)로 설정합니다. 컨텐츠 밀도가 높은 대시보드는 16px, 여유로운 마케팅 페이지는 32px을 많이 사용합니다.