디자인 아틀라스
EN
▦ 레이아웃

CSS 그리드 영역

CSS grid areas

칸에 좌표 대신 이름을 붙여(`grid-template-areas`) 레이아웃을 "그림처럼" 배치하는 CSS Grid 기능.

다른 이름: grid-template-areasNamed grid areas
···
html
<div class="stage">
  <div class="code" id="code">"icon title title" "icon sub sub" "actions actions actions"</div>
  <div class="card a" id="card">
    <div class="icon">icon</div>
    <div class="title">title</div>
    <div class="sub">sub</div>
    <div class="actions">actions</div>
  </div>
</div>
css
.stage{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(92%,420px)}
.code{font:700 clamp(8px,1.5vmin,10px)/1.5 ui-monospace,monospace;color:var(--accent-2);text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px 10px;min-height:2.8em}
.card{display:grid;gap:8px;width:100%;height:min(64%,190px);grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);transition:grid-template-areas .1s}
.card>*{border-radius:8px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);font-size:clamp(9px,1.6vmin,11px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  transition:background .4s,color .4s}
.icon{grid-area:icon;background:var(--accent);color:#fff}
.title{grid-area:title}
.sub{grid-area:sub}
.actions{grid-area:actions;background:var(--accent-3);color:#fff}
.card.a{grid-template-areas:"icon title title" "icon sub sub" "actions actions actions"}
.card.b{grid-template-areas:"title title title" "icon sub sub" "actions actions actions"}
.card.c{grid-template-areas:"actions actions actions" "title sub sub" "icon icon icon"}
js
const card = document.getElementById('card');
const code = document.getElementById('code');
const states = [
  { cls: 'a', str: '"icon title title" "icon sub sub" "actions actions actions"' },
  { cls: 'b', str: '"title title title" "icon sub sub" "actions actions actions"' },
  { cls: 'c', str: '"actions actions actions" "title sub sub" "icon icon icon"' },
];
let i = 0;
function apply() {
  const s = states[i % states.length];
  card.className = 'card ' + s.cls;
  code.textContent = s.str;
  i++;
}
apply();
setInterval(apply, 2000);

`grid-column: 2 / 4`처럼 숫자로 칸을 지정하면 칸 수가 바뀔 때마다 모든 숫자를 다시 세야 합니다. `grid-template-areas`는 부모에 문자열로 그림을 그리듯 이름을 배치하고, 자식은 `grid-area: icon`처럼 그 이름 하나만 적으면 됩니다 — 좌표 계산이 코드에서 완전히 사라집니다.

가장 큰 장점은 마크업 순서와 화면 배치가 분리된다는 점입니다. HTML에는 icon → title → sub → actions 순서로 그대로 두고, `grid-template-areas`만 바꾸면 아이콘을 위로 보내거나 액션 버튼을 맨 위로 옮길 수 있습니다. 반응형에서는 미디어 쿼리 안에 새 `grid-template-areas` 문자열 하나만 넣으면 재배치가 끝나므로, DOM 순서를 바꾸는 JS 없이도 완전히 다른 레이아웃을 만들 수 있습니다.

문자열의 각 줄은 같은 개수의 칸(단어)을 가져야 하고, 빈 칸은 마침표(`.`)로 채웁니다. 한 이름이 여러 줄·여러 칸에 걸쳐 반복되면 그 영역이 그만큼 넓게 합쳐집니다 — 아래 데모의 `icon`이 두 줄을 차지하는 방식이 그 예입니다.

언제 쓰나

카드·위젯처럼 요소가 몇 개 안 되고 화면 크기에 따라 배치를 통째로 바꿔야 할 때 가장 읽기 좋습니다. 요소가 수십 개인 표 형태 그리드에는 `repeat()` 기반 트랙 정의가 더 적합합니다.