CSS grid-template-columns प्रॉपर्टी से ग्रिड में कॉलम की संख्या सेट करें

CSS grid-template-columns प्रॉपर्टी ग्रिड कंटेनर में कॉलम (स्तंभों) की संख्या, आकार, और नाम को परिभाषित करती है। यह ग्रिड लेआउट की संरचना निर्धारित करने वाली सबसे महत्वपूर्ण प्रॉपर्टी है।

उदाहरण

नीचे दिए गए उदाहरण में, grid-template-columns: auto auto का उपयोग करके 2 कॉलम वाला ग्रिड बनाया गया है जहां प्रत्येक कॉलम की चौड़ाई कंटेंट के अनुसार ऑटोमैटिक है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: blue;
      grid-template-columns: auto auto;
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      background-color: orange;
      border: 2px solid gray;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Game Board</h1>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

grid-template-columns के उन्नत मान:

• repeat(3, 1fr) - 3 समान कॉलम (फ्रैक्शनल यूनिट)
• 200px 1fr 100px - मिश्रित निश्चित और लचीले आकार
• minmax(200px, 1fr) - न्यूनतम 200px, अधिकतम उपलब्ध जगह
• [name] 1fr [name] - नामित ग्रिड लाइन्स
• auto-fit / auto-fill - रेस्पॉन्सिव कॉलम संख्या