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

grid-auto-flow प्रॉपर्टी का उपयोग ग्रिड में स्वतः रखे गए आइटम्स को शामिल करने के तरीके को नियंत्रित करने के लिए किया जाता है। यह निर्धारित करता है कि आइटम्स पंक्तियों (row) या कॉलम (column) में कैसे प्रवाहित होते हैं।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        grid-auto-columns: 50px; 
        grid-auto-flow: column; 
        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-flow: column आइटम्स को पंक्तियों के बजाय कॉलम में भरता है। grid-auto-columns: 50px प्रत्येक स्वतः कॉलम की चौड़ाई सेट करता है। आइटम्स क्षैतिज रूप से प्रवाहित होंगे।