Components · Layout

Grid

시각 가이드 그리드 — Geist의 <Grid> 컴포넌트 대응. Foundation/Grid는 레이아웃 시스템 (containers·gap·breakpoints), 여기는 시각 가이드 변형 (solid·overlay·guide 토글).

Basic — auto-flow cells

1
2
3
4

Solid cells

solid 셀로 가이드 라인을 가려 콘텐츠를 강조.

1
2
3
4
5
6

Responsive — 1+2 / 3 / 4 / 5+6

셀이 컬럼을 가로지르며 점유.

1+2
3
4
5+6

Hidden row guides

가로 라인 숨김 — 컬럼 가이드만 표시.

1
2
3
4
5
6
7
8

Hidden column guides

세로 라인 숨김 — 행 가이드만 표시.

1
2
3
4
5
6
7
8

Overlaying cells

큰 셀이 작은 셀을 덮음. 헤더 영역, 큰 이미지 등에 사용.

Cover (3×2)
A
B

Usage

<div class="lay-grid" style="--lg-cols: 4; --lg-rows: 1;">
  <div class="lay-cell">1</div>
  <div class="lay-cell is-solid">2</div>
  <div class="lay-cell is-overlay" style="grid-column: span 2;">Cover</div>
</div>

<!-- 가이드 토글 -->
<div class="lay-grid is-hide-rows">...</div>
<div class="lay-grid is-hide-cols">...</div>

Best practices

DO

  • 마케팅·design-forward 페이지에 사용. 기본 콘텐츠는 .grid-2/3/4로 충분.
  • solid 셀로 BG 가림 — 가이드 라인이 콘텐츠를 가로지를 때.
  • 가이드 라인은 장식 — aria-hidden="true" 권장, 3:1 최소 대비.

DON'T

  • 일반 본문 그리드에 사용 금지 — Foundation/Grid의 .grid-2/3/4 사용.
  • 가이드 라인을 의미 있는 디자인 요소로 쓰지 말 것 — 항상 장식.