ग्रिड टेम्पलेट गुण सेट करने के लिए, आपको पंक्तियों और स्तंभों की संख्या निर्दिष्ट करनी होगी। इसके साथ ही ग्रिड लेआउट के भीतर के क्षेत्रों को भी सेट करें। ग्रिड टेम्प्लेट के लिए सिंटैक्स समान दर्शाता है -
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
उदाहरण
आइए अब ग्रिड टेम्पलेट के लिए एक उदाहरण देखें -
<!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> आउटपुट
