Design Atlas
한국어
▦ Layout

CSS grid areas

CSS 그리드 영역

Name grid cells instead of numbering them (grid-template-areas), so a layout reads like an ASCII picture of itself.

Also known as: 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);

Numbering cells with grid-column: 2 / 4 means recounting every number whenever the column count changes. grid-template-areas lets you draw the layout as strings of names on the parent, then each child just writes grid-area: icon — the coordinate math disappears from the code entirely.

The real payoff is that markup order and screen order become independent. The HTML can stay icon → title → sub → actions, and changing only the grid-template-areas string can send the icon to the top or move the action buttons to the front. Responsively, a single new grid-template-areas string inside a media query is enough to fully rearrange the layout — no JavaScript reordering the DOM required.

Every line in the string needs the same number of cells (words), and a period (.) marks an empty cell. Repeat a name across several rows or columns and that area merges into one bigger region — that's how "icon" below spans two rows.

When to use

Most readable for small compositions — cards, widgets — that need their whole arrangement to change by breakpoint. For grids with dozens of repeating cells, a repeat()-based track definition fits better than named areas.