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'.