CSS grid-auto-columns प्रॉपर्टी का उपयोग

grid-auto-columns प्रॉपर्टी का उपयोग ग्रिड में स्वतः बनने वाले कॉलम के डिफ़ॉल्ट आकार को सेट करने के लिए किया जाता है। यह तब लागू होता है जब ग्रिड आइटम स्पष्ट रूप से परिभाषित कॉलम से बाहर होते हैं।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        grid-auto-columns: 100px; 
        grid-gap: 10px; 
        background-color: red; 
        padding: 10px; 
      } 
      .container > div { 
        background-color: yellow; 
        text-align: center; 
        padding: 10px 0; 
        font-size: 20px; 
      } 
    </style> 
  </head> 
  <body> 
    <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-auto-columns: 100px सेट किया गया है, इसलिए प्रत्येक स्वतः उत्पन्न कॉलम 100px चौड़ा होगा। grid-gap कॉलम के बीच 10px का अंतर रखता है।