CSS Grid Named Areas
In this page:
What grid-template-areas Does
grid-template-areas defines the grid as a text-based diagram, where each string is a row and each word in it names the area that cell belongs to -- the CSS itself visually resembles the layout it produces.
Example: What grid-template-areas Does
<style>
.container {
display: grid;
grid-template-areas:
"header header"
"main main";
gap: 4px;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Diagram resembles the layout it produces</div>
</div>Naming an Area and Placing an Item
A name given in grid-template-areas (like "header") is assigned to an item with grid-area: header on that same selector, so the item automatically lands in every cell carrying that name. This removes the need to count grid lines entirely -- you just match names between the diagram and the CSS rule.
Example: Naming an Area and Placing an Item
<style>
.container {
display: grid;
grid-template-areas: "header";
background: #eee;
padding: 4px;
}
.header {
grid-area: header;
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="header">Matches the "header" name from the diagram</div>
</div>Repeating a Name to Span Cells
Repeating the same name across multiple cells in the diagram -- horizontally, vertically, or both -- makes that one item span all of those cells; the repeated cells must form a solid rectangle.
Example: Repeating a Name to Span Cells
<style>
.container {
display: grid;
grid-template-areas:
"banner banner"
"banner banner";
gap: 4px;
background: #eee;
}
.banner {
grid-area: banner;
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="banner">Spans all four repeated cells</div>
</div>Using a Period for Empty Cells
A single dot (.) in the template-areas string marks that cell as intentionally empty, leaving a visual gap in the layout with no item placed there. This is useful for deliberate whitespace in a design, like a blank column between a logo and a navigation menu.
Example: Using a Period for Empty Cells
<style>
.container {
display: grid;
grid-template-areas: "logo . nav";
gap: 8px;
background: #eee;
padding: 4px;
}
.logo { grid-area: logo; background: steelblue; color: white; padding: 10px; }
.nav { grid-area: nav; background: seagreen; color: white; padding: 10px; }
</style>
<div class="container">
<div class="logo">Logo</div>
<div class="nav">Nav</div>
</div>A Complete Page Layout Example
A typical page skeleton -- header spanning the full width, a sidebar and main content side by side, and a footer spanning the full width -- reads directly as three template-areas rows: "header header", "sidebar main", "footer footer".
Example: A Complete Page Layout Example
<style>
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 4px;
background: #eee;
}
.header { grid-area: header; background: steelblue; color: white; padding: 10px; }
.sidebar { grid-area: sidebar; background: seagreen; color: white; padding: 10px; }
.main { grid-area: main; background: coral; color: white; padding: 10px; }
.footer { grid-area: footer; background: darkslategray; color: white; padding: 10px; }
</style>
<div class="page">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: