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

CSS grid-template-columns प्रॉपर्टी ग्रिड कंटेनर में कॉलम की संख्या और उनके आकार को परिभाषित करती है। यह ग्रिड लेआउट का एक मूलभूत भाग है।

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: yellow;
      grid-template-columns: auto auto auto;
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      background-color: blue;
      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 के मान:

• auto: कंटेंट के अनुसार आकार
• px, %, fr: निश्चित या सापेक्ष आकार
• repeat(n, size): पैटर्न दोहराएं (जैसे repeat(3, 1fr))
• minmax(min, max): न्यूनतम और अधिकतम आकार