CSS grid-auto-rows প্রোপার্টি দিয়ে ডিফল্ট সারি আকার সেট করুন

grid-auto-rows প্রোপার্টি স্পষ্টভাবে সংজ্ঞায়িত ন করা সারি গুলোর (অটো-জেনারেটেড রো) ডিফল্ট উচ্চতা নির্ধারণ করে।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        grid-auto-rows: 60px; 
        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-template-rows দেওয়া নেই, তাই সারিগুলো অটো-জেনারেটেড। grid-auto-rows: 60px সেট করলে প্রতিটি অটো সারির উচ্চতা ৬০পিক্সেল হয়েছে। ৬টি আইটেম ২ কলামে (ডিফল্ট) সাজতে ৩টি সারি লাগবে, প্রতিটি ৬০পিক্সেল। minmax() ব্যবহার করে ন্যূনতম/সর্বোচ্চ আকারও দেওয়া যায়।