این دو کلاس مشخص می‌کنن که یک آیتم از کدوم خط ردیف شروع بشه و تا کجا ادامه پیدا کنه.

1) row-start

برای مشخص کردن نقطه شروع آیتم در Grid:

<div class="grid grid-rows-4 gap-4 h-64">
  <div class="bg-coral row-start-2">شروع از ردیف 2</div>
</div>

🔹 یعنی این آیتم از ردیف دوم Grid شروع میشه.

2) row-end

برای مشخص کردن نقطه پایان آیتم:

<div class="grid grid-rows-4 gap-4 h-64">
  <div class="bg-coral row-start-1 row-end-3">از ردیف 1 تا قبل از 3</div>
</div>

🔹 یعنی آیتم از ردیف اول شروع میشه و تا قبل از خط 3 تموم میشه → پس دو ردیف (1 و 2) رو می‌گیره.

3) row-span (روش ساده‌تر)

همونطور که برای ستون‌ها col-span داشتیم، برای ردیف‌ها هم row-span داریم:

<div class="grid grid-rows-4 gap-4 h-64">
  <div class="bg-coral row-span-2">این آیتم دو ردیف رو می‌گیره</div>
</div>

4) مقدار auto

اگر بخوای مرورگر خودش تصمیم بگیره:

<div class="grid grid-rows-4 gap-4 h-64">
  <div class="bg-coral row-start-auto row-end-auto">خودکار</div>
</div>

5) استفاده کاربردی (Layout پیشرفته)

مثلا بخوای یک سایدبار عمودی داشته باشی که چند ردیف رو بگیره:

<div class="grid grid-cols-3 grid-rows-4 gap-4 h-64">
  <div class="bg-coral col-span-2 row-span-1">هدر</div>
  <div class="bg-coral row-span-3">سایدبار</div>
  <div class="bg-coral col-span-2 row-span-3">محتوا</div>
</div>

🔹 اینجا:

• هدر بالا (یک ردیف، دو ستون)

• سایدبار سمت چپ (سه ردیف پشت سر هم)

• محتوا سمت راست (سه ردیف باقی‌مونده)

✅ خلاصه:

• row-start-n = از کدوم ردیف شروع بشه

• row-end-n = تا کدوم ردیف ادامه پیدا کنه

• row-span-n = چند ردیف رو بگیره

• row-auto = مرورگر خودش مدیریت کنه