1) ردیف‌های مساوی

با grid-rows-n می‌تونیم تعداد ردیف‌ها رو مشخص کنیم:

<div class="grid grid-rows-3 gap-4 h-64">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
</div>

🔹 grid-rows-3 = سه ردیف مساوی
🔹 Tailwind به صورت پیش‌فرض grid-rows-1 تا grid-rows-6 رو داره.

2) استفاده از مقدار fr

مثل ستون‌ها، اینجا هم 1fr، 2fr و … یعنی تقسیم نسبت فضا:

<div class="grid grid-rows-[1fr_2fr] gap-4 h-64">
  <div class="bg-coral">1fr</div>
  <div class="bg-coral">2fr</div>
</div>

3) ارتفاع خودکار (auto)

اگر بخوای ردیف بر اساس ارتفاع محتوا باشه:

<div class="grid grid-rows-[auto_auto_1fr] gap-4 h-64">
  <div class="bg-coral">ردیف کوتاه</div>
  <div class="bg-coral">ردیف با متن بیشتر که ارتفاع رو زیاد می‌کنه</div>
  <div class="bg-coral">پر کننده</div>
</div>

4) ردیف با اندازه ثابت

می‌تونی ردیف‌ها رو به صورت پیکسل یا درصد تنظیم کنی:

<div class="grid grid-rows-[100px_200px_auto] gap-4 h-64">
  <div class="bg-coral">100px</div>
  <div class="bg-coral">200px</div>
  <div class="bg-coral">auto</div>
</div>

5) استفاده از minmax()

برای ردیف‌های ریسپانسیو عالیه:

<div class="grid grid-rows-[minmax(100px,_1fr)_2fr] gap-4 h-64">
  <div class="bg-coral">حداقل 100px و حداکثر 1fr</div>
  <div class="bg-coral">2fr</div>
</div>

6) تکرار ردیف‌ها (repeat)

اگر بخوای چند ردیف مشابه داشته باشی:

<div class="grid grid-rows-[repeat(4,_1fr)] gap-4 h-64">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
  <div class="bg-coral">4</div>
</div>

✅ خلاصه:

• grid-rows-n → ردیف‌های مساوی (تا 6)

• grid-rows-[size1_size2...] → ردیف‌های سفارشی

• minmax() و repeat() → انعطاف‌پذیری بالا برای طراحی ریسپانسیو