Alignment (place-items، place-content، place-self)

شورت‌هندهای ترازبندی دو‌بعدی: place-items، place-content و place-self

در فصل ۱۲ با Flexbox، Propertyهایی مثل justify-content و align-items رو دیدیم که هرکدوم، فقط روی یک محور عمل می‌کردن. در Grid هم، همین Propertyها با همون اسم‌ها وجود دارن (و رفتار مشابهی دارن)، ولی چون Grid دوبعدیه، سه شورت‌هند اضافه هم داره که هر دو محور (ردیف و ستون) رو، هم‌زمان و در یک خط، کنترل می‌کنن. این درس، به همین سه شورت‌هند اختصاص داره.

یادآوری سریع: justify-content و align-items در Grid

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}

دقیقاً مثل چیزی که در فصل ۱۲ دیدیم، justify-content در Grid هم، ترازبندی کل Grid رو در طول محور افقی (ستون‌ها) کنترل می‌کنه، و align-items، ترازبندی آیتم‌ها رو در طول محور عمودی (ردیف‌ها)، درون خونه‌های خودشون.

place-items: شورت‌هند align-items و justify-items

.container {
  display: grid;
  place-items: center;
}

قبل از دیدن place-items، باید با یک Property جدید آشنا بشیم که مخصوص Grid‌ه: justify-items. این Property، دقیقاً مثل align-items (که در Flexbox هم داشتیم)، عمل می‌کنه، ولی روی محور افقی؛ یعنی مشخص می‌کنه هر آیتم، درون خونه خودش، به‌صورت افقی، کجا تراز بشه (نه کل Grid، بلکه هر آیتم داخل خونه‌ای که بهش تعلق داره).

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

Property به اسم place-items، دقیقاً همین دو Property (align-items و justify-items) رو، در یک خط واحد، ترکیب می‌کنه.

place-items: <align-items> <justify-items>;

یعنی place-items: center; در مثال اول این درس، دقیقاً معادل نوشتن جداگانه align-items: center; و justify-items: center; است؛ نتیجه‌اش این می‌شه که هر آیتم، هم به‌صورت افقی و هم عمودی، دقیقاً وسط خونه خودش قرار می‌گیره.

یک مثال بصری برای place-items

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  place-items: center;
}

<div class="container">
  <div>کوتاه</div>
  <div>یک متن کمی بلندتر</div>
  <div>متن</div>
</div>

در این مثال، هر خونه Grid، ۱۰۰ در ۱۰۰ پیکسله؛ ولی محتوای هر آیتم، ممکنه خیلی کوچیک‌تر از این فضا باشه. با place-items: center، هر آیتم، به‌جای پر کردن کل خونه (که رفتار پیش‌فرض، stretch، بود)، دقیقاً در مرکز خونه خودش، هم افقی و هم عمودی، قرار می‌گیره.

place-content: شورت‌هند align-content و justify-content

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  width: 500px;
  place-content: center;
}

این‌جا هم، قبل از place-content، باید یک Property جدید دیگه رو ببینیم: justify-content (که در واقع، از فصل ۱۲ آشناییم، ولی این‌بار رفتارش کمی متفاوته). در Grid، justify-content، ترازبندی کل شبکه Grid رو، نسبت به فضای اضافه‌ی Container (نه یک آیتم به‌تنهایی)، در طول محور افقی کنترل می‌کنه؛ و align-content، دقیقاً همون کار رو، برای محور عمودی انجام می‌ده.

Property به اسم place-content، این دو رو، دقیقاً مثل چیزی که با place-items دیدیم، در یک خط واحد ترکیب می‌کنه.

place-content: <align-content> <justify-content>;

تفاوت کلیدی place-items و place-content

شورت‌هند	عمل می‌کند روی	معادل با
place-items	ترازبندی هر آیتم، درون خونه خودش	align-items + justify-items
place-content	ترازبندی کل شبکه Grid، نسبت به فضای اضافه Container	align-content + justify-content

این تفاوت، دقیقاً همون تمایزی‌ست که در فصل ۱۲، بین align-items (برای تک‌تک آیتم‌ها) و align-content (برای کل خطوط، وقتی چند خط وجود داره) دیدیم؛ ولی این‌بار، هم روی محور افقی و هم عمودی، هم‌زمان.

یک مثال بصری برای place-content

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  width: 500px;
  height: 400px;
  place-content: center;
}

در این مثال، اندازه کل Container (۵۰۰ در ۴۰۰ پیکسل)، بیشتر از فضایی‌ست که Grid واقعاً نیاز داره (سه ستون ۱۰۰ پیکسلی و دو ردیف ۱۰۰ پیکسلی، یعنی جمعاً ۳۰۰ در ۲۰۰ پیکسل). با place-content: center، این فضای اضافه، به‌طور مساوی دور کل شبکه Grid پخش می‌شه؛ یعنی کل Grid، دقیقاً وسط Container قرار می‌گیره، نه فقط تک‌تک آیتم‌ها.

place-self: شورت‌هند align-self و justify-self برای یک آیتم خاص

.container {
  display: grid;
  place-items: start;
}

.special-item {
  place-self: center;
}

دقیقاً مثل رابطه‌ای که در فصل ۱۲ بین align-items (روی Container) و align-self (روی یک Flex Item خاص) دیدیم، اینجا هم place-self، روی خود یک Grid Item تعریف می‌شه و اجازه می‌ده، فقط برای همون یک آیتم، مقدار place-items که از Container به ارث رسیده، Override بشه.

place-self: <align-self> <justify-self>;

یک مثال ترکیبی کامل

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  place-items: start;
}

.item-featured {
  place-self: center;
}

<div class="container">
  <div>آیتم عادی</div>
  <div class="item-featured">آیتم ویژه</div>
  <div>آیتم عادی</div>
</div>

در این مثال، همه آیتم‌ها، به‌طور پیش‌فرض، در گوشه بالا-چپ خونه خودشون تراز می‌شن (به‌خاطر place-items: start)؛ به‌جز .item-featured، که با place-self: center، مستقلاً و فقط برای خودش، دقیقاً وسط خونه‌اش قرار می‌گیره.

یک مقدار واحد در برابر دو مقدار جدا

.example-a {
  place-items: center; /* هر دو محور: center */
}

.example-b {
  place-items: start end; /* عمودی: start، افقی: end */
}

اگه فقط یک مقدار به این شورت‌هندها بدیم، همون مقدار، برای هر دو محور (align و justify) اعمال می‌شه. اگه دو مقدار بدیم، مقدار اول همیشه برای align (محور عمودی) و مقدار دوم برای justify (محور افقی) در نظر گرفته می‌شه.

نکات مهم

• place-items، شورت‌هند align-items و justify-items است و ترازبندی هر آیتم را درون خونه خودش کنترل می‌کند.
• place-content، شورت‌هند align-content و justify-content است و ترازبندی کل شبکه Grid را نسبت به فضای اضافه Container کنترل می‌کند.
• place-self، روی یک Grid Item خاص تعریف می‌شود و اجازه می‌دهد فقط همان آیتم، مستقل از بقیه، ترازبندی متفاوتی داشته باشد.

اشتباهات رایج

• قاطی کردن place-items (ترازبندی تک‌تک آیتم‌ها) با place-content (ترازبندی کل شبکه Grid).
• فراموش کردن این‌که place-content فقط زمانی تأثیر قابل‌مشاهده دارد که اندازه Container، بیشتر از فضای واقعی مورد نیاز Grid باشد.
• اشتباه در ترتیب دو مقدار در شورت‌هندهای دومقداری؛ ترتیب همیشه ابتدا align و سپس justify است.

جمع‌بندی

place-items، place-content و place-self، سه شورت‌هند مخصوص CSS Grid هستند که هر دو محور ترازبندی (عمودی و افقی) را، در یک خط واحد، ترکیب می‌کنند. place-items ترازبندی تک‌تک آیتم‌ها را درون خونه خودشان، place-content ترازبندی کل شبکه Grid را نسبت به فضای اضافه Container، و place-self ترازبندی یک آیتم خاص را، مستقل از بقیه، کنترل می‌کند.