CSS Grid Rows (গ্রিড রো) — হরিজেন্টাল ট্র্যাকসমূহ

CSS Grid-এ Grid Rows হলো গ্রিড কন্টেইনারের হরিজেন্টাল ট্র্যাকগুলো। এগুলো grid-template-rows প্রোপার্টি দিয়ে ডিফাইন করা হয়। প্রতিটি রোয়ের উঁচু ফিক্সড (px, em), ফ্লেক্সিবল (fr), বা কন্টেন্ট-ভিত্তিক (auto, min-content, max-content) হতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid-container {
        display: grid;
        grid-template-rows: 100px 1fr auto 50px; /* 4 রো: ফিক্সড, ফ্লেক্স, অটো, ফিক্সড */
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        height: 400px;
        background-color: #eee;
      }
      .grid-item {
        background: #2c3e50;
        color: white;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">Row 1: 100px</div>
      <div class="grid-item">Row 2: 1fr</div>
      <div class="grid-item">Row 3: auto</div>
      <div class="grid-item">Row 4: 50px</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
      <div class="grid-item">10</div>
      <div class="grid-item">11</div>
      <div class="grid-item">12</div>
    </div>
  </body>
</html>

নোট: ইম্প্লিসিট রো (অতিরিক্ত কন্টেন্টের জন্য স্বয়ংক্রিয় তৈরি হওয়া রো) নিয়ন্ত্রণ করতে grid-auto-rows ব্যবহার করুন।