📒 대시보드 위젯 그리드 계산기

컨테이너 폭 (px)

격자 열 수 (1~48, 정수)

열 간격 gap (px)

위젯 목록 — 한 줄에 "이름, 열 수, 높이(px)"

행	위젯	열 수	픽셀 폭	높이	행의 남는 열

입력한 순서대로 왼쪽에서 채우고, 남은 열이 모자라면 다음 행으로 내립니다. 위젯을 재배열해 빈칸을 줄이거나 권장 레이아웃을 제시하지는 않습니다.

위젯은 픽셀이 아니라 열로 잡힌다

대시보드를 그릴 때 위젯 폭은 보통 "12열 중 4열"처럼 열 단위로 정합니다. 그런데 실제 픽셀 폭은 열 간격 때문에 단순 비례가 아닙니다. 4열 위젯 세 개가 한 행에 들어가는지, 마지막 행에 빈칸이 몇 열 남는지도 바로 보이지 않습니다. 이 도구는 컨테이너 폭과 열 수, 간격에서 1열 폭을 구하고 위젯 목록을 행에 채워 봅니다.

계산 방식

1열 폭은 컨테이너 폭에서 간격의 총합을 뺀 뒤 열 수로 나눈 값입니다. 위젯 폭은 차지하는 열 수에 1열 폭을 곱하고 그 사이 간격을 더해 구합니다. 배치는 입력한 순서대로 왼쪽부터 채우고 남은 열이 모자라면 다음 행으로 내리는 방식이며, 행 높이는 그 행에서 가장 높은 위젯을 따릅니다. 적용한 식은 결과 아래에 출력됩니다. 2026년 10월 기준입니다.

한계

권장 레이아웃을 제시하지 않고 위젯을 재배열해 빈칸을 줄여 주지도 않습니다. 반응형 분기점마다 열 수가 바뀌는 경우는 열 수를 바꿔 여러 번 계산하세요. CSS 코드 생성과 여러 행을 걸치는 세로 병합은 지원하지 않습니다.

자주 묻는 질문

남는 칸을 0으로 만들려면 어떻게 하나요?

행마다 열 수의 합이 격자 열 수와 정확히 같아야 합니다. 12열 격자라면 한 행을 4+4+4 나 8+4 로 맞추는 식입니다. 이 도구는 위젯을 재배열해 주지 않고, 입력한 순서로 채운 결과만 보여 줍니다.

권장 열 수가 몇 개인가요?

공인된 값은 없습니다. 12열이 널리 쓰이지만 그것도 관행일 뿐이라 이 도구는 열 수를 직접 입력받습니다. 디자인 시스템이 정한 값이 있으면 그 값을 넣으세요.

CSS 코드도 만들어 주나요?

아니요. 이 도구는 1열 폭과 위젯의 실제 픽셀 폭, 행 배치와 남는 칸만 계산합니다. CSS Grid 코드 생성은 다른 도구가 담당합니다.

📒대시보드 위젯 배치 그리드 계산기

관련된 도구

황금 비율 레이아웃 계산기

시선 흐름 F·Z 패턴 배치 가이드

위젯은 픽셀이 아니라 열로 잡힌다

계산 방식

한계

자주 묻는 질문

관련된 도구

황금 비율 레이아웃 계산기

시선 흐름 F·Z 패턴 배치 가이드

위젯은 픽셀이 아니라 열로 잡힌다

계산 방식

한계

자주 묻는 질문

같은 카테고리 도구