CSS Grid Container-এ grid-template-rows দিয়ে সারির উচ্চতা নির্ধারণ করুন

grid-template-rows প্রোপার্টি CSS Grid Layout-এ সারির সংখ্যা এবং প্রতিটি সারির উচ্চতা নির্ধারণ করে।

উদাহরণ

নিচের কোডটি চালিয়ে সারির উচ্চতা সেট করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        background-color: gray; 
        grid-template-rows: 120px 90px 100px; 
        padding: 20px; 
        grid-gap: 20px; 
      } 
      .container > div { 
        background-color: yellow; 
        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-rows: 120px 90px 100px তিনটি সারির উচ্চতা যথাক্রমে ১২০, ৯০ এবং ১০০ পিক্সেল সেট করেছে। ৬টি আইটেম ৩ সারি × ২ কলামে সাজবে (কলাম auto)। fr ইউনিট ব্যবহার করে অনুপাতিক উচ্চতাও দেওয়া যায়।