CSS grid-template-areas Property
The grid-template-areas property in CSS is known for specifying the named grid areas which establish the cells in the grid and also assigns their names.
These areas are not associated with any specific grid item but can also be referenced from the grid-placement properties like the grid-row-end, grid-column-start, grid-row-start, and grid-column-end properties.
Syntax
none | <string>+
Example 1: CSS grid-template-areas Property
In the example below, we are using the grid-template-areas property where we have given its value using three rows- one row consisting of a head, another consisting of grid navbar and the main, and the third row consisting of the navigation area and the footer area. In this property, we name the columns for each row and also assign the values of the row and column height as well as width, and accordingly, it gets set up.
<!DOCTYPE html>
<html>
<head>
<title>The grid-template-areas property in CSS</title>
<style type="text/css">
#page {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head;
background-color: #8cffff;
}
#page > nav {
grid-area: nav;
background-color: #ff8ccf;
}
#page > main {
grid-area: main;
background-color: #f8cdff;
}
#page > footer {
grid-area: foot;
background-color: #8c0fff;
}
</style>
</head>
<body>
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
</body>
</html>
Output
Example 2: CSS grid-template-areas Property
In the example below, we are using the grid-template-areas property where we have given its value as none. So, we get only the footer row as the output, without any of the other rows or columns. In this property, we name the columns for each row and also assign the values of the row and column height as well as width, and accordingly, it gets set up.
<!DOCTYPE html>
<html>
<head>
<title>The grid-template-areas property in CSS</title>
<style type="text/css">
#page {
display: grid;
width: 100%;
height: 250px;
grid-template-areas:none;
}
#page > header {
grid-area: head;
background-color: #8cffff;
}
#page > nav {
grid-area: nav;
background-color: #ff8ccf;
}
#page > main {
grid-area: main;
background-color: #f8cdff;
}
#page > footer {
grid-area: foot;
background-color: #8c0fff;
}
</style>
</head>
<body>
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
57 |
57 |
| Edge |
16 |
16 |
| Firefox |
52 |
52 |
| Internet Explorer |
no |
no |
| Opera |
44 |
44 |
| Safari |
10.1 |
10.1 |
| Webview Android |
57 |
57 |
| Chrome Android |
57 |
57 |
| Firefox Android |
52 |
52 |
| Opera Android |
43 |
43 |
| IOS Safari |
10.3 |
10.3 |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the grid-template-areas property is none. This property is applicable to grid containers. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is 'discrete'.
