ग्रिड टेम्पलेट प्रॉपर्टी सेट करने के लिए, आपको पंक्तियों और कॉलम की संख्या निर्दिष्ट करनी होगी। इसके साथ, ग्रिड लेआउट के भीतर क्षेत्र भी सेट करें। ग्रिड टेम्पलेट के लिए सिंटैक्स निम्नानुसार है:
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>हेडिंग वन</h1>
<p>कुछ यादृच्छिक संख्याएं सेट करें</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>
आउटपुट
व्याख्या: grid-template: 100px / auto auto auto एक पंक्ति (100px ऊंची) और तीन कॉलम (प्रत्येक auto चौड़ाई) बनाता है। यह grid-template-rows: 100px; grid-template-columns: auto auto auto; का शॉर्टहैंड है। 9 आइटम्स 3x3 ग्रिड भरते हैं।
