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.
