🎯 What is grid-template-areas?
grid-template-areas lets you name parts of your layout and place them using a text-based visual format. It's easier to read and maintain than using grid line numbers.
🔧 Syntax
grid-template-areas:
"header header"
"sidebar main"
"footer footer";Then apply it like:
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }👨💻 Quick Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Grid: grid-template-areas</title>
<style>
.infographic-gridareas {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-gridareas[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.ga-inner { padding: 0.5rem; }
.ga-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.ga-code-wrap {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
overflow: hidden;
}
.ga-filetabs {
display: flex;
background: #161616;
border-bottom: 1px solid #2a2a2a;
}
.ga-filetab {
border: none;
background: transparent;
color: #8a8a8a;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.78rem;
font-weight: 700;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ga-filetab:hover { color: #e5e5e5; }
.ga-filetab.ga-tab-on {
color: #ffffff;
border-bottom-color: #5b8def;
background: #0b0b0b;
}
.ga-code {
padding: 1rem 1.8rem 1rem 0.9rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.8rem;
line-height: 1.85;
overflow-x: auto;
}
.ga-codepane { display: none; }
.ga-codepane.ga-pane-on { display: block; }
.ga-line { display: block; white-space: pre; color: #8a8a8a; padding: 0.05rem 0.4rem; border-radius: 5px; }
.ga-line.ga-clickable { cursor: pointer; color: #e5e5e5; transition: background 0.15s ease, box-shadow 0.15s ease; }
.ga-line.ga-clickable:hover { background: #1c2333; }
.ga-line.ga-active { background: #1c2333; box-shadow: inset 3px 0 0 #5b8def; color: #ffffff; }
.ga-tag { color: #60a5fa; font-weight: 700; }
.ga-attr { color: #f2b96b; }
.ga-str { color: #9ece6a; }
.ga-sel { color: #f472b6; font-weight: 700; }
.ga-prop { color: #c586c0; }
.ga-val { color: #ce9178; }
.ga-area-str { color: #9ece6a; font-weight: 700; }
.ga-browser {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
}
.ga-browser-bar {
background: var(--paper-alt);
padding: 0.5rem 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
}
.ga-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.ga-tab {
background: var(--paper);
border: 1px solid var(--line);
border-bottom: none;
border-radius: 6px 6px 0 0;
font-size: 0.72rem;
color: var(--ink-soft);
padding: 0.25rem 0.6rem;
}
.ga-urlrow {
background: var(--paper-alt);
padding: 0.35rem 0.7rem 0.6rem;
font-size: 0.72rem;
color: var(--ink-soft);
font-family: "SFMono-Regular", Consolas, monospace;
}
.ga-screen {
background: #ffffff;
padding: 1.2rem 1.4rem 1.4rem;
}
.ga-out-grid {
display: grid;
grid-template-columns: 70px 220px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 8px;
}
.ga-out-item {
padding: 14px 8px;
border: 1px solid #999;
font-weight: bold;
text-align: center;
color: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 0.8rem;
transition: outline 0.2s ease, opacity 0.2s ease;
}
.ga-out-header { grid-area: header; background: lightblue; }
.ga-out-sidebar { grid-area: sidebar; background: lightgreen; }
.ga-out-main { grid-area: main; background: lightcoral; }
.ga-out-footer { grid-area: footer; background: lightgray; }
.ga-out-lit { outline: 3px solid var(--accent); outline-offset: 2px; }
.ga-dim { opacity: 0.35; }
.ga-note {
font-size: 0.82rem;
color: var(--ink-soft);
padding: 0 0.2rem;
}
.ga-note strong { color: var(--ink); }
.ga-note code {
font-family: "SFMono-Regular", Consolas, monospace;
background: var(--paper-alt);
padding: 0.05rem 0.3rem;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="infographic-gridareas" id="ga-root">
<div class="ga-inner">
<div class="ga-layout">
<div class="ga-code-wrap">
<div class="ga-filetabs">
<button class="ga-filetab ga-tab-on" id="ga-tab-html">index.html</button>
<button class="ga-filetab" id="ga-tab-css">styles.css</button>
</div>
<div class="ga-code">
<div class="ga-codepane ga-pane-on" id="ga-pane-html">
<span class="ga-line"><<span class="ga-tag">div</span> <span class="ga-attr">class</span>=<span class="ga-str">"grid"</span>></span>
<span class="ga-line ga-clickable ga-active" data-part="header"> <<span class="ga-tag">div</span> <span class="ga-attr">class</span>=<span class="ga-str">"header"</span>>Header</<span class="ga-tag">div</span>></span>
<span class="ga-line ga-clickable" data-part="sidebar"> <<span class="ga-tag">div</span> <span class="ga-attr">class</span>=<span class="ga-str">"sidebar"</span>>Sidebar</<span class="ga-tag">div</span>></span>
<span class="ga-line ga-clickable" data-part="main"> <<span class="ga-tag">div</span> <span class="ga-attr">class</span>=<span class="ga-str">"main"</span>>Main</<span class="ga-tag">div</span>></span>
<span class="ga-line ga-clickable" data-part="footer"> <<span class="ga-tag">div</span> <span class="ga-attr">class</span>=<span class="ga-str">"footer"</span>>Footer</<span class="ga-tag">div</span>></span>
<span class="ga-line"></<span class="ga-tag">div</span>></span>
</div>
<div class="ga-codepane" id="ga-pane-css">
<span class="ga-line gp-static"><span class="ga-sel">.grid</span> {</span>
<span class="ga-line"> <span class="ga-prop">display</span>: <span class="ga-val">grid</span>;</span>
<span class="ga-line"> <span class="ga-prop">grid-template-columns</span>: <span class="ga-val">1fr 3fr</span>;</span>
<span class="ga-line gp-map ga-clickable" data-part="header"> <span class="ga-prop">grid-template-areas</span>:</span>
<span class="ga-line gp-map ga-clickable" data-part="header"> <span class="ga-area-str">"header header"</span></span>
<span class="ga-line gp-map ga-clickable" data-part="sidebar"> <span class="ga-area-str">"sidebar main"</span></span>
<span class="ga-line gp-map ga-clickable" data-part="footer"> <span class="ga-area-str">"footer footer"</span>;</span>
<span class="ga-line"> <span class="ga-prop">gap</span>: <span class="ga-val">10px</span>;</span>
<span class="ga-line">}</span>
<span class="ga-line ga-clickable ga-active" data-part="header"><span class="ga-sel">.header</span> { <span class="ga-prop">grid-area</span>: <span class="ga-val">header</span>; }</span>
<span class="ga-line ga-clickable" data-part="sidebar"><span class="ga-sel">.sidebar</span> { <span class="ga-prop">grid-area</span>: <span class="ga-val">sidebar</span>; }</span>
<span class="ga-line ga-clickable" data-part="main"><span class="ga-sel">.main</span> { <span class="ga-prop">grid-area</span>: <span class="ga-val">main</span>; }</span>
<span class="ga-line ga-clickable" data-part="footer"><span class="ga-sel">.footer</span> { <span class="ga-prop">grid-area</span>: <span class="ga-val">footer</span>; }</span>
</div>
</div>
</div>
<div class="ga-browser">
<div class="ga-browser-bar">
<span class="ga-dot"></span><span class="ga-dot"></span><span class="ga-dot"></span>
<div class="ga-tab">🌐 Grid Areas</div>
</div>
<div class="ga-urlrow">127.0.0.1:5500/index.html</div>
<div class="ga-screen">
<div class="ga-out-grid" id="ga-out-grid">
<div class="ga-out-item ga-out-header ga-out-lit" id="ga-out-header">Header</div>
<div class="ga-out-item ga-out-sidebar" id="ga-out-sidebar">Sidebar</div>
<div class="ga-out-item ga-out-main" id="ga-out-main">Main</div>
<div class="ga-out-item ga-out-footer" id="ga-out-footer">Footer</div>
</div>
</div>
</div>
<div class="ga-note" id="ga-note">
The <code>grid-template-areas</code> string is a literal ASCII map of the layout — each quoted row is a grid row, each word a cell's area name. <code>grid-area</code> just tells an item which name to claim.
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('ga-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const tabHtml = document.getElementById('ga-tab-html');
const tabCss = document.getElementById('ga-tab-css');
const paneHtml = document.getElementById('ga-pane-html');
const paneCss = document.getElementById('ga-pane-css');
tabHtml.addEventListener('click', () => {
tabHtml.classList.add('ga-tab-on');
tabCss.classList.remove('ga-tab-on');
paneHtml.classList.add('ga-pane-on');
paneCss.classList.remove('ga-pane-on');
});
tabCss.addEventListener('click', () => {
tabCss.classList.add('ga-tab-on');
tabHtml.classList.remove('ga-tab-on');
paneCss.classList.add('ga-pane-on');
paneHtml.classList.remove('ga-pane-on');
});
const notes = {
header: 'The <code>"header header"</code> row means header claims both columns in row 1 — same as writing <code>grid-column: 1 / 3</code> by hand.',
sidebar: '<code>"sidebar main"</code> puts sidebar in the narrow left column of row 2, right where the word sits in the map.',
main: 'The word <strong>main</strong> sits in the wide right column of row 2 — that position in the string is literally where it renders.',
footer: '<code>"footer footer"</code> spans both columns again in row 3, mirroring the header pattern.'
};
const outMap = {
header: ['ga-out-header'],
sidebar: ['ga-out-sidebar'],
main: ['ga-out-main'],
footer: ['ga-out-footer']
};
const note = document.getElementById('ga-note');
document.querySelectorAll('.ga-line.ga-clickable').forEach(line => {
line.addEventListener('click', () => {
const part = line.getAttribute('data-part');
document.querySelectorAll('.ga-line').forEach(l => {
l.classList.toggle('ga-active', l.getAttribute('data-part') === part);
});
document.querySelectorAll('.ga-out-item').forEach(el => {
el.classList.remove('ga-out-lit');
el.classList.add('ga-dim');
});
outMap[part].forEach(id => {
const el = document.getElementById(id);
el.classList.add('ga-out-lit');
el.classList.remove('ga-dim');
});
if (notes[part]) note.innerHTML = notes[part];
});
});
})();
</script>
</body>
</html>✅ Benefits
Makes layout easier to read
Ideal for templates or page sections
Helpful in responsive design
⚠️ Tips
Use
.for empty cells:"sidebar ."All rows must have same number of names
Area names = valid CSS identifiers (no spaces)