تراز شبکه (Grid Align)
در گرید (Grid)، «تراز شبکه (Grid Align)» یعنی تنظیم جای محتوا. اگر فضا خالی ماند، می گوییم کجا بایستد. سه ابزار داریم: justify-content افقی، align-content عمودی، و place-content میان بُر هر دو.
justify-content؛ تراز افقی محتوا
«justify-content» وقتی عرض کل محتوا از کانتینر کمتر است اثر دارد. مقدارها مانند space-evenly، space-around، space-between، center، start و end هستند.
نکته: اگر محتوا کلِ عرض را پُر کند، اثری نمی بینید.
space-evenly؛ فواصل مساوی
<style>
.container {
display: grid;
justify-content: space-evenly;
}
</style>
center؛ وسط چین افقی
<style>
.container {
display: grid;
justify-content: center;
}
</style>
space-between؛ چسبیده به طرفین
<style>
.container {
display: grid;
justify-content: space-between;
}
</style>
align-content؛ تراز عمودی محتوا
«align-content» وقتی ارتفاع کل محتوا از کانتینر کمتر است اثر دارد. مقدارها همان خانواده justify-content هستند اما عمودی.
نکته: برای دید بهتر، معمولاً height روی کانتینر می گذاریم.
center؛ وسط چین عمودی
<style>
.container {
display: grid;
height: 300px;
align-content: center;
}
</style>
space-evenly؛ فاصله های مساوی عمودی
<style>
.container {
display: grid;
height: 300px;
align-content: space-evenly;
}
</style>
space-between؛ بالا و پایین تماس
<style>
.container {
display: grid;
height: 300px;
align-content: space-between;
}
</style>
place-content؛ میان بُر عمودی/افقی
«place-content» میان بُر align-content و justify-content است. با دو مقدار می آید: اولی عمودی، دومی افقی. با یک مقدار، هر دو همان مقدار می شوند.
center؛ وسط چین دوطرفه
<style>
.container {
display: grid;
height: 300px;
place-content: center;
}
</style>
end space-between؛ پایین و پخش افقی
<style>
.container {
display: grid;
height: 300px;
place-content: end space-between;
}
</style>
گام های تمرینی
- یک کانتینر گرید بساز.
- سه ستون 70px تعریف کن.
- justify-content را center امتحان کن.
- align-content را space-evenly تست کن.
- در پایان place-content: end space-between بزن.
جمع بندی سریع
- justify-content تراز افقی است.
- align-content تراز عمودی است.
- place-content میان بُر هر دوست.
- اثر وقتی فضا خالی باشد.
- ارتفاع کانتینر را تنظیم کن.
برای فاصله ها، صفحه فاصله شبکه را ببین. برای آیتم ها، به آیتم های گرید برو. همچنین مسیرها در ردیف و ستون شبکه توضیح داده شده است.