유니온 배치 계산기

컨테이너 안에 일정한 크기의 아이템(유닛)을 균일하게 배치할 때, 한 줄에 들어가는 개수와 전체 행 수, 남는 여백 등을 계산합니다.

유니온 배치 계산기 — 사용법 & 작동원리

사용법 (How to use)

1) 컨테이너 너비, 아이템 너비, 간격(gap), 총 아이템 수를 입력합니다.
2) (선택) 좌우 패딩 합계를 입력하면 컨테이너 유효 너비를 정확히 계산합니다.
3) 계산하기 버튼을 누르면 한 줄에 들어가는 개수(열), 필요한 행 수, 사용된 너비와 남는 여백, 예상 전체 높이를 보여줍니다.
4) 결과에 나온 예시 CSS 코드를 복사해 실제 레이아웃에 적용해 보세요.

참고: 아기 월령 관련 계산은 아기 개월 수 계산기를, 게임 관련 배치/계산은 포켓몬 경험치 계산기를 참고하세요.

작동 원리 (How this calculator works)

이 계산기는 입력한 숫자를 이용해 한 줄에 몇 개의 아이템이 들어가는지와 전체 행 수를 수학적으로 계산합니다. 핵심 공식은 다음과 같습니다.

기본 변수
  • 컨테이너 너비 = containerW
  • 좌우 패딩 합 = paddingLR (선택)
  • 아이템 너비 = itemW
  • 아이템 높이 = itemH (결과 높이 계산용, 선택)
  • 아이템 간격 = gap
  • 총 아이템 수 = totalItems
계산 공식 (간단)
  1. effectiveContainerWidth = containerW - paddingLR — 패딩을 제외한 실제 사용 가능한 너비.
  2. columns = floor( (effectiveContainerWidth + gap) / (itemW + gap) ) — 한 줄에 들어가는 아이템 개수(최소 1개). (gap을 포함해 간격 단위를 맞춤)
  3. usedWidth = columns * itemW + (columns - 1) * gap — 실제 사용되는 너비.
  4. leftover = effectiveContainerWidth - usedWidth — 남는 여백(가운데 정렬 시 좌우로 나눠짐).
  5. rows = ceil( totalItems / columns ) — 필요한 전체 행 수.
  6. totalHeight = rows * itemH + (rows - 1) * gap — 아이템 높이(itemH)를 입력한 경우에 계산되는 전체 예상 높이.

설명(한 줄 요약): 먼저 유효 너비를 구한 뒤, 한 아이템과 한 간격을 하나의 단위로 보고 그 단위가 몇 번 들어가는지(정수로) 계산합니다. 남는 여백은 가운데 정렬이면 좌우로 나누어집니다.

간단 팁: 반응형 레이아웃에서는 고정 px 대신 minmax() 또는 1fr를 쓰면 더 유연합니다. 계산 결과의 예시 CSS를 참고하여 실제 레이아웃에 적용해 보세요.