🔹 خاصیت place-self در CSS ترکیبی از دو ویژگی align-self و justify-self هست.
یعنی می‌گه: این آیتم (تکی) داخل grid یا flex container دقیقاً کجا قرار بگیره؟
(برخلاف place-items که روی همه آیتم‌ها یکجا اعمال می‌شه.)

1) کلاس‌های Tailwind برای place-self

2) مثال‌ها

🔹 place-self-center

<div class="grid grid-cols-3 gap-4 h-64 bg-gray-200">
  <div class="bg-coral w-16 h-16">1</div>
  <div class="bg-coral w-16 h-16 place-self-center">2</div>
  <div class="bg-coral w-16 h-16">3</div>
</div>

👉 فقط آیتم شماره 2 میاد وسط cell خودش.

🔹 place-self-end

<div class="grid grid-cols-3 gap-4 h-64 bg-gray-200">
  <div class="bg-coral w-16 h-16">A</div>
  <div class="bg-coral w-16 h-16 place-self-end">B</div>
  <div class="bg-coral w-16 h-16">C</div>
</div>

👉 آیتم B می‌ره پایین و راست سلول خودش.

🔹 place-self-stretch

<div class="grid grid-cols-3 gap-4 h-64 bg-gray-200">
  <div class="bg-coral w-16 h-16">X</div>
  <div class="bg-coral place-self-stretch">Y</div>
  <div class="bg-coral w-16 h-16">Z</div>
</div>

👉 آیتم Y کشیده می‌شه تا فضای سلول کامل پر بشه.

✅ فرقش با place-items:

• place-items → همه آیتم‌ها با هم (سطح container).

• place-self → فقط یک آیتم خاص (سطح child).