Set the grid template property in CSS

CSSWeb DevelopmentFront End Technology

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;


Let us now see an example for grid template −

 Live Demo

<!DOCTYPE html>
.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;
<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>


Updated on 26-Dec-2019 10:54:55