Layout

1. Page Header

기본 페이지 헤더

2. Responsive Grid

.responsive-grid

1열 → 2열 (640px+) → 3열 (1024px+) 반응형 그리드

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

카드와 함께 사용

카드 1

카드 설명

카드 내용

카드 2

카드 설명

카드 내용

카드 3

카드 설명

카드 내용

3. Responsive Grid Columns (1:2 Layout)

.grid-cols-1-lg-3 + .col-span-1-lg / .col-span-2-lg

모바일: 1열 스택 → 데스크톱(1024px+): 3열 그리드 (1:2 비율)

col-span-1-lg

1/3 너비 (lg+)

col-span-2-lg

2/3 너비 (lg+)

카드 레이아웃 예시 (사이드바 + 메인)

사이드바

카테고리 상세 정보

상태: 활성

상품 수: 24개

메인 콘텐츠

상품 목록 또는 상세 정보

메인 영역은 2/3 너비를 차지합니다. 테이블, 폼, 상세 정보 등을 표시하기에 적합합니다.