تراز آیتم شبکه (Grid Item Align)
در گرید (Grid)، «تراز آیتم شبکه» یعنی هر آیتم داخل خانه خودش چطور بچسبد. «justify-self» افقی را تنظیم می کند. «align-self» عمودی را تنظیم می کند. «place-self» هر دو را با هم تنظیم می کند. مثل قرار دادن برگه روی نیمکت: چپ، راست، وسط، یا کشیده.
justify-self؛ تراز افقی داخل خانه
ویژگی «justify-self» تراز افقی آیتم را تعیین می کند. مقادیر مهم: start, center, end, right, left, stretch. اگر فضای خالی نباشد، اثری نمی بینی.
<style>
.item1 {
justify-self: right;
}
.item6 {
justify-self: center;
}
.container {
display: grid;
}
</style>
align-self؛ تراز عمودی داخل خانه
ویژگی «align-self» تراز عمودی را تعیین می کند. مقادیر مهم: start, center, end, stretch. برای دیدن اثر، محور بلوکی باید فضای خالی داشته باشد.
<style>
.item1 {
align-self: start;
}
.item6 {
align-self: center;
}
.container {
display: grid;
height: 300px;
}
</style>
place-self؛ میان بُر دوگانه
«place-self» میان بُرِ «align-self» و «justify-self» است. با یک خط، هر دو جهت را تنظیم کن. مثل «place-self: center;» برای مرکز کامل.
نکته: برای اعمال تراز، آیتم باید فضای خالی پیرامون داشته باشد. در غیر این صورت «stretch» یا اندازه محتوا غالب می شود.
گام های تمرینی سریع
- یک گرید سه ستونه بساز.
- روی آیتم اول «justify-self: end» بگذار.
- ارتفاع کانتینر را زیاد کن.
- روی آیتم آخر «align-self: center» بگذار.
- با «place-self: center» هر دو جهت را تست کن.
جمع بندی سریع
- justify-self برای تراز افقی است.
- align-self برای تراز عمودی است.
- place-self هر دو را ترکیب می کند.
- نیاز به فضای خالی پیرامون داری.
برای ادامه، صفحه تراز آیتم شبکه را مرجع کن و سپس نام گذاری آیتم و گستره آیتم را هم ببین.