Grid is a layout system that uses a grid with rows and columns.
The grid-template-areas property defines named grid areas.
The value is a sequence of names that define rows and columns.
A grid layout with 5 named grid areas.
<style>
.grid-template {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
.grid-template > div {
background-color: aliceblue;
text-align: center;
padding: 25px 5px;
font-size: 18px;
}
</style>
<div class="grid-template">
<div style="grid-area: header">Header</div>
<div style="grid-area: menu">Menu</div>
<div style="grid-area: main">Main</div>
<div style="grid-area: right">Right</div>
<div style="grid-area: footer">Footer</div>
</div>
grid-template-areas: none | areanames;
| Value | Description |
|---|---|
none |
Default. No grid area names. |
areanames |
A sequence of names that specify how rows and columns are formed. |
This table shows when grid-template-areas support started for each browser.
 Chrome
|
57 | Mar 2017 |
 Firefox
|
52 | Mar 2017 |
 IE/Edge
|
16 | Sep 2017 |
 Opera
|
44 | Mar 2017 |
 Safari
|
10 | Sep 2016 |
