CSS 그리드 열너비 계산기

CSS 그리드 열너비 계산기 사용법

CSS Grid 레이아웃을 설계할 때 컨테이너의 전체 너비와 열 수, 열 사이 간격인 거터를 입력하면 각 열에 배분되는 너비를 확인할 수 있습니다. 반응형 웹의 데스크톱·태블릿·모바일 브레이크포인트별 그리드 기준을 정할 때 유용합니다.

좌우 여백은 한쪽에 적용되는 여백을 입력하면 계산 과정에서 양쪽 여백으로 반영됩니다. 열 사이의 거터는 열 수보다 하나 적은 횟수만큼 적용됩니다.

계산 방법

먼저 컨테이너 너비에서 좌우 여백과 전체 거터 너비를 뺍니다. 남은 사용 가능 너비를 열 수로 나누면 각 열의 너비가 됩니다.

거터 합계는 다음과 같이 계산합니다.

계산 예시

• 3열 데스크톱 그리드: 컨테이너 1200px, 거터 24px, 한쪽 여백 0px이면 거터 합계는 48px입니다. 사용 가능 너비 1152px을 3으로 나누어 각 열은 384px입니다.
• 4열 카드 그리드: 컨테이너 1440px, 거터 32px, 한쪽 여백 24px이면 좌우 여백 48px과 거터 합계 96px을 제외합니다. 사용 가능 너비 1296px을 4로 나누어 각 열은 324px입니다.

사용 시 주의사항 및 활용 팁

• 본 계산기 결과는 동일한 너비의 열을 사용하는 단순 CSS Grid 레이아웃을 기준으로 한 참고값입니다.
• box-sizing, 내부 패딩, 테두리, 스크롤바, 최소 너비 설정에 따라 실제 화면에 표시되는 너비가 달라질 수 있습니다.
• 반응형 레이아웃에서는 화면 너비별로 열 수와 거터를 다시 계산하고, 너무 좁은 열이 생기지 않는지 확인하세요.
• CSS에서는 grid-template-columns: repeat(3, 1fr)와 gap 속성을 함께 사용하면 계산된 비율과 거터를 쉽게 구현할 수 있습니다.