모바일 상품 레이아웃이 목록형인 경우, 상품, 미디어+상품, 갤러리 섹션의 모바일 열 개수를 변경할 수 있습니다.
※ 동일한 섹션이 목록형으로 여러 개 있더라도 CSS는 모든 섹션에 공통으로 적용됩니다.
본문 영역의 HTML 섹션의 기기별 항목을 선택하고 모바일 코드에 입력해 주세요. 공통 유형에 소스코드를 입력하면 데스크톱 화면의 열 설정에도 적용됩니다.
•
grid-template-columns: repeat(값, 1fr);에서 ‘값’ 부분의 숫자를 변경하면 원하는 열 개수로 조정할 수 있습니다.
◦
예시) grid-template-columns: repeat(4, 1fr);일 때 모바일 화면에서 4열로 표시됩니다.
•
--count-per-line-mobile: 값 !important;에서 ‘값’ 부분의 숫자를 변경하여 원하는 열 개수로 조정할 수 있습니다.
◦
예시) --count-per-line-mobile: 4 !important;일 때 모바일 화면에서 4열로 표시됩니다.
Essential 테마
상품 섹션<style>
/* 상품 */
.section-type-ProductList-T01 [class*="CatalogListstyled__CatalogList"] {
grid-template-columns: repeat(값, 1fr);
}
</style>
HTML
복사
미디어+상품 섹션<style>
/* 미디어+상품 */
.section-type-MediaProduct-T01 [class*="CatalogListstyled"] {
grid-template-columns: repeat(값, 1fr);
</style>
HTML
복사
갤러리 섹션<style>
/* 갤러리 */
.section-type-Gallery-T01 [class*="GalleryT01_grid"] {
--count-per-line-mobile: 값 !important;
}
</style>
HTML
복사
Grid, Round 테마
상품 섹션<style>
/* 상품 */
.section-type-ProductList ul[class*="CatalogList_catalog-list"] {
--count-per-line: 값 !important;
}
</style>
HTML
복사
미디어+상품 섹션<style>
/* 미디어+상품 */
.section-type-MediaProduct ul[class*="CatalogList_catalog"] {
--count-per-line: 값 !important;
}
</style>
HTML
복사
갤러리 섹션<style>
/* 갤러리 */
.section-type-Gallery [class*="Gallery_grid"] {
--count-per-line-mobile: 값 !important;
}
</style>
HTML
복사
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기