Foundations

Layout (레이아웃·그리드)

화면을 나누는 규격 — 브레이크포인트·컨테이너·12컬럼 그리드·간격 적용 규칙과 정형 레이아웃 3종. 값의 정본은 --layout-* 토큰(2026-07-15 신설).

브레이크포인트 — 3단계

구간	범위	대상
Mobile	< 768px	스마트폰 — 1컬럼, 내비는 드로어
Tablet	768 ~ 1199px	태블릿·좁은 창 — 그리드 축소(12→8칸 감각)
Desktop	≥ 1200px	데스크톱 — 풀 그리드 + 고정 사이드바

@media에서는 CSS 변수를 쓸 수 없으므로 768px·1200px 값 자체가 정본이다(--layout-bp-tablet·--layout-bp-desktop 토큰과 항상 일치시킨다).
구간을 늘리고 싶어도 3단계를 유지한다 — 채널이 많은 대신 규칙은 적게.

컨테이너·폭

용도	토큰	값
페이지 컨테이너 최대폭	`--layout-container-max`	1200px
본문(읽는 글) 최대폭	`--layout-content-max`	860px
사이드바 폭	`--layout-sidebar-width`	240px

읽는 글(문서·블로그)은 컨테이너가 넓어도 본문은 860px을 넘기지 않는다(한 줄이 길면 가독성이 급락).
컨테이너 좌우 패딩: 모바일 --space-5, 데스크톱 --space-8.

12컬럼 그리드

본문 영역 (8칸)

주 콘텐츠가 들어갑니다.

보조 영역 (4칸)

요약·링크 등.

카드 A

카드 B

카드 C

html

<div class="pi-container">
  <div class="pi-grid">
    <div class="pi-col-8"><article class="pi-card"><h3 class="pi-card__title">본문 영역 (8칸)</h3><p class="pi-card__body">주 콘텐츠가 들어갑니다.</p></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">보조 영역 (4칸)</h3><p class="pi-card__body">요약·링크 등.</p></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">카드 A</h3></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">카드 B</h3></article></div>
    <div class="pi-col-4"><article class="pi-card"><h3 class="pi-card__title">카드 C</h3></article></div>
  </div>
</div>

css

.pi-container {
  max-width: var(--layout-container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.pi-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}
.pi-col-3 { grid-column: span 3; }
.pi-col-4 { grid-column: span 4; }
.pi-col-6 { grid-column: span 6; }
.pi-col-8 { grid-column: span 8; }
.pi-col-12 { grid-column: span 12; }

/* Tablet(768~1199): 절반 이하 칸은 6칸으로 확대 */
@media (max-width: 1199px) {
  .pi-col-3, .pi-col-4 { grid-column: span 6; }
}
/* Mobile(<768): 전부 한 컬럼 */
@media (max-width: 767px) {
  .pi-container { padding-inline: var(--space-5); }
  [class*="pi-col-"] { grid-column: span 12; }
}
@media (min-width: 1200px) {
  .pi-container { padding-inline: var(--space-8); }
}

간격 적용 규칙 (스케일은 있는데 언제 뭘 쓰나)

자리	토큰	감각
섹션 사이(세로 리듬)	`--space-11` ~ `--space-13`	주제가 바뀐다
제목 ↔ 본문	`--space-3` ~ `--space-4`	붙어 있다
문단 사이	`--space-4`	숨 고르기
카드 그리드 gap	`--space-5`	한 무리
카드 내부 패딩	`--card-pad`	컴포넌트 토큰 우선

규칙: 같은 위계 = 같은 간격. 섹션마다 간격이 다르면 위계가 무너진다.
임의 px를 만들지 말고 스케일에서 고른다 — 스케일에 없는 간격이 필요하면 설계를 의심한다.

정형 레이아웃 3종 (자주 쓰는 화면의 기본형)

① 히어로 + 카드 그리드 (마케팅·소개)

css

.pi-layout-hero { padding-block: var(--space-13); text-align: center; }
.pi-layout-hero .pi-layout-hero__copy { max-width: var(--layout-content-max); margin-inline: auto; }
.pi-layout-hero + .pi-grid { margin-top: var(--space-10); }

히어로(핵심 카피 1개 + CTA 버튼 1개) 아래 3~4칸 카드 그리드. 히어로에 문장을 쌓지 않는다 — 한 화면 한 메시지.

② 문서형 (가이드·매뉴얼 — 이 문서 사이트가 이 형태)

css

.pi-layout-doc { display: grid; grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); }
.pi-layout-doc__main { max-width: var(--layout-content-max); margin-inline: auto; padding: var(--space-8); }
@media (max-width: 767px) { .pi-layout-doc { grid-template-columns: 1fr; } }

좌 고정 사이드바(내비) + 본문 860px. 모바일에서 사이드바는 드로어로 전환.

③ 카탈로그형 (제품 목록 — 안전표지 카탈로그 등)

css

.pi-layout-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--layout-sidebar-width), 1fr));
  gap: var(--space-5);
}
.pi-layout-catalog__toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }

상단 툴바(필터 Chip·검색) + auto-fill 카드 그리드 + 하단 Pagination(20개 초과 시). 카드 크기는 그리드가 계산 — 개별 카드에 폭을 주지 않는다.