Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS grid-template Property

The grid-template property in CSS is a shorthand property that defines grid-columns, areas, and rows. The constituent properties of the grid-template property in CSS are grid-template-columns, grid-template-areas, and grid-template-rows.

Note: The grid shorthand property is known to accept the same syntax and also resetting the implicit grid properties to their initial values. So, it is recommended to use the grid property in order to prevent the values from cascading in a separate way.

Syntax

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

where 
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

where 
<length-percentage> = <length> | <percentage>

CSS grid-template Property Example

In the example below, we are using the grid-template property with different border styles, colors, and different values.

In this case, we have given the grid-template property as head nav main foot, using all the values of this property. The CSS styling is done inside the opening and closing head tags of the HTML.

You have the choice to give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.

<!DOCTYPE html>
<html>
<head>
	<title>The grid-template property in CSS</title>
	<style type="text/css">
		#page {
		  display: grid;
		  width: 100%;
		  height: 200px;
		  grid-template: [header-left] "head head" 30px [header-right]
		                 [main-left]   "nav  main" 1fr  [main-right]
		                 [footer-left] "nav  foot" 30px [footer-right]
		                 / 120px 1fr;
		}		
		header {
		  background-color: purple;
		  grid-area: head;
		}		
		nav {
		  background-color: lightblue;
		  grid-area: nav;
		}		
		main {
		  background-color: yellow;
		  grid-area: main;
		}		
		footer {
		  background-color: deeppink;
		  grid-area: foot;
		}
	</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: The grid-template Property in CSS

In the example below, we are using the grid-template property with different border styles, colors, and different values.

In this case, we have given the grid-template property as "a a a" and "b b b" 20% auto. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.

<!DOCTYPE html>
<html>
<head>
	<title>The grid-template property in CSS</title>
	<style type="text/css">
		#page {
		  display: grid;
		  width: 100%;
		  height: 200px;
		grid-template: "a a a" 20%
		               "b b b" auto;
		}		
		header {
		  background-color: purple;
		  grid-area: head;
		}		
		nav {
		  background-color: lightblue;
		  grid-area: nav;
		}		
		main {
		  background-color: yellow;
		  grid-area: main;
		}
		
		footer {
		  background-color: deeppink;
		  grid-area: foot;
		}
	</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

This is a live example, here, you can easily test the live coding and execute the example using different values or even edit the code 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 each of the constituent properties of the grid-template property (grid-template-rows, grid-template-columns, and grid-template-areas) is 'none'. This property is applicable to grid containers. It is not an inherited property. Percentage values refer to the corresponding dimension of the specific content area. The computed value for each of its constituent properties is the as specified one.