Content section
주요 정보나 기능을 배치합니다.
Grid
12열 CSS Grid 기반 레이아웃 시스템입니다. 대부분의 배치는 부모 .grid에 클래스만 지정하고, 자식은 마크업 콘텐츠만 두면 됩니다.
기본 페이지 레이아웃
헤더와 푸터는 전체 12열을 사용하고, 본문 영역은 md 이상에서 사이드바 3열과 콘텐츠 9열로 나눕니다. 작은 화면에서는 모든 영역이 한 열로 쌓입니다.
콘텐츠가 있는 페이지 레이아웃
기본 페이지 레이아웃을 바탕으로 Main content 안에 제목·설명과 반응형 콘텐츠 섹션을 배치한 활용 예시입니다.
Main content
페이지 제목과 설명이 들어가는 기본 콘텐츠 영역입니다.
Content section
관련 정보나 보조 콘텐츠를 배치합니다.
부모 클래스로 제어
열 수·간격·비율·자식 일괄 span은 부모에만 클래스를 부여합니다. 자식에 grid 관련 클래스가 필요 없습니다.
grid_cols-3
grid_cols-3
grid_cols-3
grid_ratio-2-1
grid_ratio-2-1
grid_item-span-4 (12열 기준 3개/행)
grid_item-span-4
grid_item-span-4
grid_item-span-4
grid_item-span-4
grid_item-span-4
12열 전체 활용
12열 시스템의 각 열을 하나씩 사용합니다. itemSpan={1}을 부모에 지정하면 12개 항목이 한 행의 전체 열을 채웁니다.
1
2
3
4
5
6
7
8
9
10
11
12
균등 열
grid_cols-*로 동일 너비 열을 지정합니다. 12열 시스템과 무관하게 fr 기반으로 분할됩니다.
cols 2
cols 2
cols 4
cols 4
cols 4
cols 4
비율 열
grid_ratio-*로 2~3열 비율 레이아웃을 부모에서 한 번에 지정합니다.
1 : 2
1 : 2
1
2
1
자식 일괄 span (12열)
모든 자식이 같은 열 비율일 때 grid_item-span-*을 부모에 지정합니다. grid_item-span-6이면 한 행에 2개씩 배치됩니다.
span 6
span 6
span 6
span 6
span 3
span 3
span 3
span 3
자식별 span (혼합 레이아웃)
행마다 열 비율이 다를 때만 자식에 grid_col-span-*을 지정합니다. 8+4, 4+4+4처럼 개별 제어가 필요한 경우에 사용합니다.
span 8
span 4
span 4
span 4
span 4
간격
grid_gap-sm · grid_gap-lg · grid_gap-none은 부모에 지정합니다.
gap sm
gap sm
gap sm
gap lg
gap lg
gap lg
반응형
Grid의 colsMd · colsLg와 itemSpanMd · itemSpanLg로 전체 배치를, GridCol의 spanMd · spanLg로 자식별 배치를 제어합니다.
1 → md 2 → lg 3열
1 → md 2 → lg 3열
1 → md 2 → lg 3열
span 12 → md 6 → lg 4
span 12 → md 6 → lg 4
span 12 → md 6 → lg 4
개별 span 12 → md 8 → lg 9
개별 span 12 → md 4 → lg 3
자동 배치
grid_auto-fit · grid_auto-fill은 부모에 지정합니다.
auto-fit
auto-fit
auto-fit
auto-fit
auto-fit
auto-fit
API · Grid Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
cols | number | string | — | 균등 열 수 (grid_cols-*) |
colsMd | number | string | — | md 브레이크포인트 이상 균등 열 수 (grid_cols-md-*) |
colsLg | number | string | — | lg 브레이크포인트 이상 균등 열 수 (grid_cols-lg-*) |
ratio | '1-1' | '2-1' | '1-2' | '3-1' | '1-1-1' | '1-2-1' | — | 2~3열 비율 레이아웃 (grid_ratio-*) |
itemSpan | number | string | — | 모든 자식에 동일 span 적용 (12열 기준, grid_item-span-*) |
itemSpanMd | number | string | — | md 이상 자식 일괄 span (grid_item-span-md-*) |
itemSpanLg | number | string | — | lg 이상 자식 일괄 span (grid_item-span-lg-*) |
gap | 'sm' | 'lg' | 'none' | — | 열·행 간격. 생략 시 --grid-gap (md) |
autoFit | boolean | false | auto-fit 반복 열 (grid_auto-fit) |
autoFill | boolean | false | auto-fill 반복 열 (grid_auto-fill) |
API · GridCol Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
as | string | 'div' | GridCol이 렌더링할 HTML 요소 (예: header, aside, section, footer) |
span | number | string | — | 12열 기준 개별 열 span (grid_col-span-*) |
spanMd | number | string | — | md 이상 개별 열 span (grid_col-span-md-*) |
spanLg | number | string | — | lg 이상 개별 열 span (grid_col-span-lg-*) |
API · Grid Children
| Children | 설명 |
|---|---|
children | 그리드 자식 콘텐츠 (Vue default 슬롯 대응) |
API · GridCol Children
| Children | 설명 |
|---|---|
children | 열 셀 내부 콘텐츠 (Vue default 슬롯 대응) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
grid | 12열 CSS Grid 루트 |
grid_cols-* · grid_cols-md-* · grid_cols-lg-* | 균등 열 수 |
grid_ratio-* | 비율 열 (2-1, 1-2-1 등) |
grid_item-span-* · grid_item-span-md-* · grid_item-span-lg-* | 자식 일괄 span |
grid_col-span-* · grid_col-span-md-* · grid_col-span-lg-* | 자식별 개별 span (혼합 레이아웃) |
grid_gap-sm · grid_gap-lg · grid_gap-none | 간격 변형 |
grid_auto-fit · grid_auto-fill | 자동 반복 열 |
grid_equal-columns | 균등 열 자동 흐름 |
grid_align-center · grid_align-end | 교차축 정렬 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--grid-columns | 12 | 기본 열 수 |
--grid-gap | var(--space-md) | 기본 간격 |
--grid-gap-sm · --grid-gap-lg | var(--space-sm) · var(--space-lg) | 간격 변형 |
--grid-auto-min | 10rem | auto-fit · auto-fill 최소 열 너비 |