🔲카탈로그 항목 수별 레이아웃 그리드 선택기

제품 수·페이지 크기 기반 최적 그리드 구조 제안

전체 상품 수

화면 유형

카탈로그 그리드 레이아웃이란?

상품 목록 페이지의 그리드 열 수는 디바이스 화면 크기와 상품 개수에 따라 달라져야 합니다. 열이 너무 많으면 모바일에서 상품 정보가 뭉개지고, 너무 적으면 데스크탑 화면이 헐렁하게 비어 보입니다. 이 계산기는 상품 수와 화면 유형을 입력하면 균형 잡힌 열·행 구조를 추천합니다.

디바이스별 기본 열 수

모바일은 2열, 태블릿은 상품이 많을 때 4열까지, 데스크탑은 상품 수에 따라 4~6열까지 확장하는 방식을 기본값으로 사용합니다. 상품 수가 추천 열 수보다 적을 때는 빈 칸이 생기지 않도록 열 수를 상품 수만큼 자동으로 줄입니다.

실무에 적용하는 방법

계산된 열 수는 CSS Grid의 grid-template-columns: repeat(N, 1fr) 값으로 바로 옮겨 쓸 수 있습니다. 카드 너비 비율은 이미지 비율을 정할 때 참고하면 레이아웃이 깨지지 않습니다. 상품 수가 자주 바뀌는 카테고리 페이지라면 이 기준을 반응형 브레이크포인트마다 다르게 적용하는 것이 좋습니다.

자주 묻는 질문

모바일에서는 그리드를 몇 열로 구성해야 하나요?

모바일 화면에서는 2열 구성이 가장 무난합니다. 상품 이미지와 정보가 너무 작아지지 않으면서도 한 화면에 여러 상품을 노출할 수 있습니다.

상품 수가 열 수보다 적으면 어떻게 되나요?

상품 수가 추천 열 수보다 적을 때는 상품 수만큼만 열을 구성해 빈 칸이 생기지 않도록 자동으로 줄여서 계산합니다.

카탈로그 그리드 레이아웃이란?

디바이스별 기본 열 수

실무에 적용하는 방법

자주 묻는 질문

같은 카테고리 도구