레이아웃 그리드 계산기 (열 폭·거터·8pt 격자)

전체 폭과 열 수, 거터, 좌우 여백을 넣으면 열 하나의 폭과 여러 열을 합친 폭이 바로 계산됩니다. 웹 화면의 12열 그리드를 잡을 때나 인쇄물 지면을 mm로 나눌 때 씁니다.

사용 방법

1. '단위'에서 px 또는 mm를 고르고 '폭 프리셋'에서 모바일, 태블릿, 데스크톱, A4, Letter 중 하나를 고르거나 '전체 폭'에 직접 넣습니다.
2. '열 수', '거터(열 사이 간격)', '여백'을 넣습니다. 왼쪽과 오른쪽 여백이 다르면 '좌우 여백'을 '왼쪽·오른쪽 따로'로 바꿉니다.
3. '열 폭'과 '열 합산 폭' 표를 읽고, '격자 단위'로 8 px 또는 4 px 격자에 맞는지 확인합니다. 맞지 않으면 안내 문장의 전체 폭을 써 보세요.
4. '중단점 3개 비교'를 켜면 같은 설정으로 세 폭의 열 폭을 한 표에서 봅니다. 'CSS 복사'를 눌러 코드로 가져갑니다.

계산 방식과 참고

• 열 폭 = (전체 폭 − 왼쪽 여백 − 오른쪽 여백 − 거터 × (열 수 − 1)) ÷ 열 수입니다. n열 합산 폭 = 열 폭 × n + 거터 × (n − 1)입니다.
• '콘텐츠 최대 폭'을 넣으면 전체 폭이 그보다 넓을 때 콘텐츠를 그 폭으로 묶고 남는 폭을 양쪽 여백에 나눕니다.
• mm 모드의 격자 단위는 포인트입니다. 1 pt = 0.3528 mm, 96 dpi 기준 1 mm = 3.78 px로 계산합니다.
• 입력값은 이 기기의 브라우저에 저장되어 다음에 열 때 그대로 나옵니다.

자주 묻는 질문

1200 px 12열 그리드의 열 폭은 얼마인가요?

거터가 24 px이고 여백이 없으면 (1200 − 24 × 11) ÷ 12 = 78 px입니다. 거터를 32 px로 바꾸면 70.67 px이 됩니다.

열 폭이 8 px 격자에 맞지 않으면 어떻게 하나요?

안내 문장이 가장 가까운 배수와 그에 맞는 전체 폭을 알려 줍니다. 예를 들어 열 폭 78 px은 80 px로 올리고 콘텐츠 폭을 1224 px로 두면 됩니다. 거터나 여백을 조금 바꾸는 방법도 있습니다.

A4 지면을 몇 열로 나누는 것이 좋나요?

정해진 답은 없습니다. 본문 위주면 2~3열, 사진과 표가 섞이면 6열이나 12열을 쓰면 여러 폭을 조합하기 쉽습니다. 이 도구에 A4 210 mm와 여백 15 mm, 거터 4 mm를 넣으면 열 폭을 바로 비교할 수 있습니다.

복사한 CSS는 어떻게 쓰나요?

.container는 콘텐츠 폭과 좌우 여백을, .grid는 열 수와 거터를 정합니다. 열을 여러 개 차지하는 요소에는 grid-column: span 4처럼 적습니다. mm 모드에서는 인쇄용 @page 여백도 함께 들어 있습니다.