📌 ویژگی justify-self مشابه justify-items هست،
با این تفاوت که روی یک آیتم خاص داخل Grid اعمال میشه، نه روی همه‌ی آیتم‌ها.

یعنی اگر بخوای فقط یک المان در Grid رو جدا از بقیه افقی تراز کنی، از justify-self استفاده می‌کنی.

1) کلاس‌های Tailwind مربوط به justify-self

2) مثال‌ها

🔹 همه آیتم‌ها سمت چپ (ولی یکی رو تغییر میدیم)

<div class="grid grid-cols-3 justify-items-start gap-4">
  <div class="bg-coral">1</div>
  <div class="bg-coral justify-self-center">2</div>
  <div class="bg-coral">3</div>
</div>

👉 همه آیتم‌ها سمت چپ هستن، اما آیتم دوم رو با justify-self-center وسط گذاشتیم.

🔹 آیتم خاص سمت راست

<div class="grid grid-cols-3 justify-items-center gap-4">
  <div class="bg-coral">A</div>
  <div class="bg-coral justify-self-end">B</div>
  <div class="bg-coral">C</div>
</div>

👉 همه آیتم‌ها وسط قرار گرفتن، ولی آیتم دوم رفت سمت راست.

🔹 آیتم Stretch

<div class="grid grid-cols-3 gap-4">
  <div class="bg-coral">One</div>
  <div class="bg-coral justify-self-stretch">Two</div>
  <div class="bg-coral">Three</div>
</div>

👉 آیتم دوم کل عرض ستون خودش رو گرفت.

✅ خلاصه:

• justify-items → همه آیتم‌ها رو افقی تراز می‌کنه.

• justify-self → فقط روی یک آیتم خاص در Grid اثر داره.