ویژگی justify-items برای تنظیم تراز افقی (horizontal alignment) محتوای هر سلول Grid استفاده میشه.
⚡ نکته: این خاصیت فقط در Grid کار می‌کنه، نه در Flexbox.

1) مقادیر قابل استفاده در Tailwind

2) مثال‌ها

🔹 start

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

👉 همه‌ی محتواها سمت چپ ستون‌ها قرار می‌گیرن.

🔹 center

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

👉 محتوا وسط هر سلول میاد.

🔹 end

<div class="grid grid-cols-3 justify-items-end gap-4">
  <div class="bg-coral">X</div>
  <div class="bg-coral">Y</div>
  <div class="bg-coral">Z</div>
</div>

👉 محتواها سمت راست ستون‌ها قرار می‌گیرن.

🔹 stretch (پیش‌فرض)

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

👉 آیتم‌ها عرض ستون رو کامل می‌گیرن.

✅ خلاصه:

• justify-items برای افقی تراز کردن محتوا داخل سلول‌های Grid استفاده میشه.

• روی Flexbox کار نمی‌کنه.

• مقادیر: start, end, center, stretch.