CSS grid-auto-flow প্রোপার্টি দিয়ে অটো-প্লেসড আইটেম ইনসারশন নিয়ন্ত্রণ করুন

grid-auto-flow প্রোপার্টি গ্রিডে স্বয়ংক্রিয়ভাবে প্লেস হওয়া আইটেমগুলো কীভাবে ইনসার্ট হবে তা নির্ধারণ করে: সারি-ভিত্তিক (row) নাকি কলাম-ভিত্তিক (column)।

উদাহরণ

নিচের কোডটি চালিয়ে grid-auto-flow প্রোপার্টির ব্যবহার দেখুন:

<!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 অটো-জেনারেটেড কলামগুলোর প্রস্থ ৫০পিক্সেল সেট করেছে। ডিফল্ট row। dense কীওয়ার্ড যোগ করলে (column dense) খালি জায়গা পূরণ করার চেষ্টা করে।