grid-template-areas: ASCII 아트로서의 layout

"CSS 가 layout 의 스케치처럼 읽혀. 비유가 아니야 — 문법이 문자 그대로 그래."

아이디어

대부분 layout 이 명명된 영역으로 묘사 가능: header, 사이드바, main, footer. grid-template-areas 가 string 으로 그 지도를 CSS 에 직접 그리게 해 줘 — 각 string 이 row 고 각 단어가 셀 이름. 항목이 그 다음 grid-area 로 이름으로 영역 참조.

결과는 CSS 가 가진 가장 가독성 좋은 layout 문법 — CSS 가 문자 그대로 스케치처럼 보임.

문법

Grid 컨테이너에:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

각 string 이 row 하나. String 안에서 이름이 공백으로 구분, 각 이름이 column 하나에 해당. 위 string 이 row 셋 정의:

• Row 1: header 가 양 column span.
• Row 2: sidebar 가 column 1, main 이 column 2.
• Row 3: footer 가 양 column span.

셀 span 하려면 이름 반복. 셀 비우려면 단일 마침표 . (또는 점 시퀀스).

이름으로 항목 배치

이제 항목이 grid-area: 으로 영역에 land:

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

참고: grid-area: header (단일 이름) 가 영역 이름으로 해석. grid-area: 1 / 1 / 2 / 3 (숫자 넷) 가 라인 번호 약자. 파서가 구분.

. 으로 빈 셀

셀 비우길 원하면 (gap 또는 padding 영역), 마침표 사용:

grid-template-areas:
  "header header header"
  ".      main   ."
  "footer footer footer";

이게 main 영역이 가운데 row 의 가운데 column 에 있고 양 옆에 빈 셀 가진 layout 만듦.

Template Swap 으로 반응형 reflow

킬러 feature: media query 에서 template 재정의 — 단일 선언으로 layout 완전 재배열, 항목 안 건드리고.

시각 스케치 읽기

String 을 조심스럽게 정렬하면, template 가 문자 그대로 너가 묘사하는 layout 처럼 보여:

제약

• 영역은 직사각형이어야 함. L 모양 영역 정의 불가. 시도하면 ("a a b" / "a b b"), CSS 가 template 를 invalid 로 거부.
• 이름은 단순 string. camelCase 강제 없음; 파서가 관대. kebab-case 또는 단일 단어 써.
• 컨테이너당 template 하나. 중첩 grid 가 각자 template; 상속 안 함.

라인 번호 대신 쓸 때

• 매우 동적 배치 — JS 에서 계산된 항목이 데이터 기반으로 특정 셀에 land. 라인 번호가 계산 쉬움.
• auto-placement 가진 사진 갤러리 — auto-placement 가 처리; 일부 항목 크게 만들려 span 사용.
• Breakpoint 마다 항목 수 바뀌는 layout — 라인 번호가 media query 와 더 잘 compose.

페이지 레벨 모든 거 — 앱 셸, 대시보드 frame, 고정 영역 구조 가진 마케팅 페이지 — 에 template-areas 가 가독성에서 매번 이김.

피파의 노트