The grid-template property in CSS is a shorthand property for defining grid columns, rows, and areas. It allows you to set values for the following longhand properties: grid-template-rows, grid-template-columns, and grid-template-areas.
Syntax
grid-template: none| grid-template-rows/ grid-template-columns | grid-template-areas | initial | inheritProperty Values:
1. none:
Resets the sizing of rows and columns to their default values.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-template Property
</title>
<style>
.main {
display: grid;
grid-template: none;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="item1">G</div>
<div class="item2">E</div>
<div class="item3">E</div>
<div class="item4">K</div>
</div>
</body>
</html>
Output:
2. grid-template-rows/grid-template-columns:
This property value is used to specify size of rows and columns measured in px, cm etc. If the user wants the row or column size to remain default then set that row or column to "auto".
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-template Property
</title>
<style>
.main {
display: grid;
grid-template: 50px 100px/150px auto;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="item1">G</div>
<div class="item2">E</div>
<div class="item3">E</div>
<div class="item4">K</div>
</div>
</body>
</html>
Output:
3. grid-template-areas:
This property value specifies areas within the grid layout. grid-area property is used to name the grid items and then reference them using grid-template-areas.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-template Property
</title>
<style>
.item1 {
grid-area: item1;
}
.item2 {
grid-area: item2;
}
.item3 {
grid-area: item3;
}
.item4 {
grid-area: item4;
}
.main {
display: grid;
grid-template: 'item1 item1 item1'
'item2 item3 item4';
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="item1">G</div>
<div class="item2">E</div>
<div class="item3">E</div>
<div class="item4">K</div>
</div>
</body>
</html>
Output:
4. initial:
This property value will set the property to its default value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-template Property
</title>
<style>
.main {
display: grid;
grid-template: initial;
alignnone grid-gap: 10px;
background-color: green;
padding: 10px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="item1">G</div>
<div class="item2">E</div>
<div class="item3">E</div>
<div class="item4">K</div>
</div>
</body>
</html>
Output:
5. inherit:
This will inherit this property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-template Property
</title>
<style>
.main {
display: grid;
grid-template: inherit;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px 0;
font-size: 30px;
}
alignnone
</style>
</head>
<body>
<div class="main">
<div class="item1">G</div>
<div class="item2">E</div>
<div class="item3">E</div>
<div class="item4">K</div>
</div>
</body>
</html>
Output:
The grid-template property is a powerful shorthand tool for defining the structure and layout of CSS grids. By combining grid-template-rows, grid-template-columns, and grid-template-areas, you can create complex and responsive grid layouts with ease.
Supported Browsers: The browser supported by CSS grid-template Property are listed below:
- Google Chrome 57.0
- Edge 16
- Firefox 52.0
- Safari 10.1
- Opera 44.0