Naming Grid Items with grid-area
Grid areas take their names from two properties working together. On a grid item, grid-area assigns a name; on the grid container, grid-template-areas uses those names to define areas within the layout.
Inside that value, each row is written between its own pair of apostrophes, with the named items listed and separated by spaces. A second set of apostrophes therefore adds a second row.
A grid item with no name is represented by a period sign (.).
Spanning five columns
Naming item1 "myHeader" lets it span all five columns of a five-column grid layout.
Prompt
Create a CSS Grid layout with a container of 5 columns. Use grid-template-areas to name item1 as "myHeader" spanning all five columns. Display 6 numbered grid items with item1 at the top spanning the full width.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Named Grid Area Span</title>
<style>
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-area: myHeader;
}
</style>
</head>
<body>
<h1>Named Grid Area</h1>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Period sign for unnamed items
In this five-column grid layout, "myHeader" spans three columns, and period signs stand for items with no name.
Prompt
Create a CSS Grid layout with 5 columns. Use grid-template-areas where "myHeader" spans the first three columns and the last two columns use a period sign (.) for unnamed items. Display 6 numbered grid items.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Period Sign No Name</title>
<style>
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-area: myHeader;
}
</style>
</head>
<body>
<h1>Period Sign for Unnamed Items</h1>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Spanning columns and rows
Here "myHeader" covers two columns and two rows of the grid.
Prompt
Create a CSS Grid layout with 5 columns and use grid-template-areas with two rows where "myHeader" spans two columns and two rows. Use period signs for unnamed cells. Display 6 numbered grid items.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Columns and Rows</title>
<style>
.container {
display: grid;
grid-template-areas:
'myHeader myHeader . . .'
'myHeader myHeader . . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-area: myHeader;
}
</style>
</head>
<body>
<h1>Span Columns and Rows</h1>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Make a ready-to-use Webpage Template
Give every grid item a name, and grid-template-areas can describe a complete webpage layout template for you.
Example
A ready-to-use webpage template, built by naming every grid item, with header, menu, main, right, and footer areas.
Prompt
Create a CSS Grid webpage template with named areas: header (top row, full width), menu (left column rows 2-3), main (center of row 2), right (right column row 2), and footer (bottom row spanning from column 2). Use grid-template-areas to define the layout with 6 columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage Template</title>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Webpage Template</h1>
<div class="container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>