Grid

Grid

12열 CSS Grid 기반 레이아웃 시스템입니다. 대부분의 배치는 부모 .grid에 클래스만 지정하고, 자식은 마크업 콘텐츠만 두면 됩니다.

기본 페이지 레이아웃

헤더와 푸터는 전체 12열을 사용하고, 본문 영역은 md 이상에서 사이드바 3열과 콘텐츠 9열로 나눕니다. 작은 화면에서는 모든 영역이 한 열로 쌓입니다.

Header
Main content
Footer

콘텐츠가 있는 페이지 레이아웃

기본 페이지 레이아웃을 바탕으로 Main content 안에 제목·설명과 반응형 콘텐츠 섹션을 배치한 활용 예시입니다.

Header

Main content

페이지 제목과 설명이 들어가는 기본 콘텐츠 영역입니다.

Content section

주요 정보나 기능을 배치합니다.

Content section

관련 정보나 보조 콘텐츠를 배치합니다.

Footer

부모 클래스로 제어

열 수·간격·비율·자식 일괄 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열 시스템의 각 열을 하나씩 사용합니다. item-span=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의 cols-md · cols-lg와 item-span-md · item-span-lg로 전체 배치를, GridCol의 span-md · span-lg로 자식별 배치를 제어합니다.

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타입기본값설명
colsnumber | string—균등 열 수 (grid_cols-*)
cols-mdnumber | string—md 브레이크포인트 이상 균등 열 수
cols-lgnumber | string—lg 브레이크포인트 이상 균등 열 수
ratio'1-1' | '2-1' | '1-2' | '3-1' | '1-1-1' | '1-2-1'—2~3열 비율 레이아웃 (grid_ratio-*)
item-spannumber | string—모든 자식에 동일 span 적용 (12열 기준, grid_item-span-*)
item-span-mdnumber | string—md 이상 자식 일괄 span
item-span-lgnumber | string—lg 이상 자식 일괄 span
gap'sm' | 'lg' | 'none'—열·행 간격. 생략 시 --grid-gap (md)
auto-fitbooleanfalseauto-fit 반복 열 (grid_auto-fit)
auto-fillbooleanfalseauto-fill 반복 열 (grid_auto-fill)

API · GridCol Props

Prop타입기본값설명
asstring'div'GridCol이 렌더링할 HTML 요소 (예: header, aside, section, footer)
spannumber | string—12열 기준 개별 열 span (grid_col-span-*)
span-mdnumber | string—md 이상 개별 열 span (grid_col-span-md-*)
span-lgnumber | string—lg 이상 개별 열 span (grid_col-span-lg-*)

API · Grid Slots

슬롯설명
default그리드 자식 콘텐츠

API · GridCol Slots

슬롯설명
default열 셀 내부 콘텐츠

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스설명
grid12열 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-columns12기본 열 수
--grid-gapvar(--space-md)기본 간격
--grid-gap-sm · --grid-gap-lgvar(--space-sm) · var(--space-lg)간격 변형
--grid-auto-min10remauto-fit · auto-fill 최소 열 너비