To set the grid template property, you need to specify the number of rows and columns. With that, also set the areas within the grid layout. The syntax for grid template reflects the same −
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Example
Let us now see an example for grid template −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template: 100px / auto auto auto;
grid-gap: 5px;
background-color: blue;
padding: 5px;
}
.grid-container > div {
background-color: orange;
text-align: center;
padding: 5px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="item1">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
<div class="item8">723</div>
<div class="item9">811</div>
</div>
</body>
</html>Output
