تابز مدیا | آموزش قدم به قدم برنامه نویسی

place-content

🔹 خاصیت place-content در CSS در واقع ترکیب دو ویژگی align-content و justify-content هست.
یعنی هم تعیین می‌کنه ردیف‌ها در محور عمودی (cross-axis) چطور قرار بگیرن و هم در محور افقی (main-axis).

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

کلاس	مقدار CSS	توضیح
`place-content-center`	`place-content: center;`	ردیف‌ها هم افقی و هم عمودی وسط قرار می‌گیرن
`place-content-start`	`place-content: start;`	ردیف‌ها بالا/چپ قرار می‌گیرن
`place-content-end`	`place-content: end;`	ردیف‌ها پایین/راست قرار می‌گیرن
`place-content-between`	`place-content: space-between;`	بین ردیف‌ها فاصله مساوی، اول بالا، آخر پایین
`place-content-around`	`place-content: space-around;`	فاصله مساوی اطراف همه ردیف‌ها
`place-content-evenly`	`place-content: space-evenly;`	فاصله برابر بین همه ردیف‌ها
`place-content-stretch`	`place-content: stretch;`	ردیف‌ها در کل فضای container کشیده می‌شن (پیش‌فرض)

2) مثال‌ها

🔹 وسط چین کامل


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

👉 هم افقی و هم عمودی وسط قرار می‌گیرن.

🔹 space-between


<div class="grid grid-cols-2 gap-4 h-64 place-content-between bg-gray-200">
  <div class="bg-coral p-4">A</div>
  <div class="bg-coral p-4">B</div>
  <div class="bg-coral p-4">C</div>
  <div class="bg-coral p-4">D</div>
</div>

👉 ردیف اول بالا، ردیف آخر پایین، بقیه وسط با فاصله مساوی.

🔹 stretch


<div class="grid grid-cols-2 gap-4 h-64 place-content-stretch bg-gray-200">
  <div class="bg-coral p-4">X</div>
  <div class="bg-coral p-4">Y</div>
  <div class="bg-coral p-4">Z</div>
  <div class="bg-coral p-4">W</div>
</div>

👉 همه ردیف‌ها کشیده می‌شن و فضای خالی رو پر می‌کنن.

✅ فرق place-content با align-content اینه که:

align-content فقط روی محور عمودی کار می‌کنه.
place-content همزمان افقی و عمودی رو کنترل می‌کنه.