🔹 خاصیت place-items در CSS در واقع ترکیب دو ویژگی align-items و justify-items هست.
یعنی تعیین می‌کنه که تمام آیتم‌های داخل grid یا flex container در هر دو محور افقی و عمودی کجا قرار بگیرن.

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

2) مثال‌ها

🔹 place-items-center

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

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

🔹 place-items-start

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

👉 همه آیتم‌ها می‌رن بالا و به چپ cell خودشون.

🔹 place-items-stretch

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

👉 آیتم‌ها کشیده می‌شن تا فضای هر cell رو پر کنن.

✅ فرق place-items با place-content:

• place-items → آیتم‌های داخل هر سلول grid رو جا می‌ده.

• place-content → کل ردیف‌ها یا ستون‌ها رو در container تنظیم می‌کنه.