CSS grid-row প্রোপার্টি

grid-row শর্টহ্যান্ড প্রোপার্টি grid-row-start এবং grid-row-end একসাথে সেট করে, অর্থাৎ একটি গ্রিড আইটেম কোন সারি লাইন থেকে শুরু এবং কোন লাইনে শেষ হবে তা নির্ধারণ করে।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        background-color: green; 
        grid-template-columns: auto auto; 
        padding: 20px; 
        grid-gap: 10px; 
      } 
      .container > div { 
        background-color: orange; 
        text-align: center; 
        padding: 10px 0; 
        font-size: 20px; 
      } 
      .ele1 { 
        grid-row: 1 / 6; 
      } 
    </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-row: 1 / 6 মানে এলিমেন্টটি ১ নম্বর সারি লাইন থেকে ৬ নম্বর সারি লাইন পর্যন্ত ছড়িয়ে থাকবে (৫টি সারি উচ্চতা)। শর্টহ্যান্ড না ব্যবহার করে grid-row-start: 1; grid-row-end: 6; লিখলেও হয়। span 5 দিয়ে ৫টি সারি ছাড়ানো বোঝানো যায়।