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;

Example

Let us now see an example for grid template −

 Live Demo

<!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

raja
Published on 26-Dec-2019 10:54:55
Advertisements