نام گذاری آیتم (Grid Item Named)
در گرید (Grid)، «نام گذاری آیتم» یعنی برای هر بخش، اسم ساده بدهیم. بعد، با «grid-template-areas» چیدمان را مثل نقشه کلاس می چینیم. نام گذاری فهمیدن طرح را آسان می کند؛ مثل برچسب روی صندلی ها.
نام گذاری با grid-area و استفاده در grid-template-areas
ویژگی «grid-area» به آیتم اسم می دهد. سپس همان اسم را در «grid-template-areas» می چینیم تا جای آیتم مشخص شود.
<style>
.item1 {
grid-area: myHeader;
}
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
}
</style>
نقطه خالی (.)؛ جای بدون نام
در «grid-template-areas»، نقطه (.) یعنی این خانه نام ندارد. پس این بخش خالی می ماند یا آیتمی نمی گیرد.
<style>
.item1 {
grid-area: myHeader;
}
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
}
</style>
دو ردیف با یک نام
برای ساخت دو ردیفِ یک ناحیه، دو خط الگو بنویس. هر خط در کوتیشن جدا می آید.
<style>
.item1 {
grid-area: myHeader;
}
.container {
display: grid;
grid-template-areas:
'myHeader myHeader . . .'
'myHeader myHeader . . .';
}
</style>
قالب آماده صفحه با نام ها
می خواهی صفحه کامل بسازی؟ برای header, menu, main, right, footer اسم بده. سپس نقشه را با grid-template-areas رسم کن.
<style>
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu footer footer footer footer footer';
}
</style>
نکته: طول هر ردیف باید تعداد ستون های مساوی داشته باشد. در غیر این صورت چیدمان خطا می دهد.
گام های تمرینی
- سه ستون برابر تعریف کن.
- برای آیتم اول، grid-area بگذار: header.
- در کانتینر، grid-template-areas را با «header» بچین.
- با نقطه ها، جای خالی بساز و تفاوت را ببین.
- قالب کامل صفحه را طبق مثال پیاده کن.
جمع بندی سریع
- grid-area به آیتم اسم می دهد.
- grid-template-areas نقشه چیدمان است.
- نقطه (.) یعنی خانه بدون نام.
- ردیف ها باید طول برابر داشته باشند.
برای مرور، بخش نام گذاری آیتم را دوباره ببین. سپس گستره آیتم و تراز شبکه را نیز بررسی کن.