카탈로그 그리드 레이아웃이란?
상품 목록 페이지의 그리드 열 수는 디바이스 화면 크기와 상품 개수에 따라 달라져야 합니다. 열이 너무 많으면 모바일에서 상품 정보가 뭉개지고, 너무 적으면 데스크탑 화면이 헐렁하게 비어 보입니다. 이 계산기는 상품 수와 화면 유형을 입력하면 균형 잡힌 열·행 구조를 추천합니다.
디바이스별 기본 열 수
모바일은 2열, 태블릿은 상품이 많을 때 4열까지, 데스크탑은 상품 수에 따라 4~6열까지 확장하는 방식을 기본값으로 사용합니다. 상품 수가 추천 열 수보다 적을 때는 빈 칸이 생기지 않도록 열 수를 상품 수만큼 자동으로 줄입니다.
실무에 적용하는 방법
계산된 열 수는 CSS Grid의 grid-template-columns: repeat(N, 1fr) 값으로 바로 옮겨 쓸 수 있습니다. 카드 너비 비율은 이미지 비율을 정할 때 참고하면 레이아웃이 깨지지 않습니다. 상품 수가 자주 바뀌는 카테고리 페이지라면 이 기준을 반응형 브레이크포인트마다 다르게 적용하는 것이 좋습니다.
자주 묻는 질문
모바일에서는 그리드를 몇 열로 구성해야 하나요?
모바일 화면에서는 2열 구성이 가장 무난합니다. 상품 이미지와 정보가 너무 작아지지 않으면서도 한 화면에 여러 상품을 노출할 수 있습니다.
상품 수가 열 수보다 적으면 어떻게 되나요?
상품 수가 추천 열 수보다 적을 때는 상품 수만큼만 열을 구성해 빈 칸이 생기지 않도록 자동으로 줄여서 계산합니다.