عناصر فرزند (آیتم‌ها)
یک کانتینر شبکه شامل آیتم‌های شبکه‌ای است.
به‌طور پیش‌فرض، هر ستون در هر ردیف یک آیتم شبکه دارد، اما می‌توانید آیتم‌های شبکه را به گونه‌ای طراحی کنید که در چندین ستون یا ردیف قرار گیرند.
خاصیت grid-column
خاصیت grid-column مشخص می‌کند که یک آیتم در کدام ستون یا ستون‌ها قرار گیرد.
این خاصیت محل شروع و پایان آیتم را تعیین می‌کند.
توجه: خاصیت grid-column یک خاصیت مخفف برای grid-column-start و grid-column-end است.
برای جایگذاری یک آیتم می‌توانید به شماره‌های خط ستون‌ها اشاره کنید، یا از کلمه کلیدی span استفاده کنید تا مشخص کنید که آیتم در چند ستون گسترش یابد.
مثال‌ها
آیتم “item1” از ستون ۱ شروع شود و قبل از ستون ۵ تمام شود:
.item1 {
grid-column: 1 / 5;
}آیتم “item1” از ستون ۱ شروع شود و ۳ ستون را در بر بگیرد:
.item1 {
grid-column: 1 / span 3;
}آیتم “item2” از ستون ۲ شروع شود و ۳ ستون را در بر بگیرد:
.item2 {
grid-column: 2 / span 3;
}خاصیت grid-row
خاصیت grid-row مشخص می‌کند که یک آیتم در کدام ردیف یا ردیف‌ها قرار گیرد.
این خاصیت محل شروع و پایان آیتم را در ردیف‌ها تعیین می‌کند.
توجه: خاصیت grid-row یک خاصیت مخفف برای grid-row-start و grid-row-end است.
مثال‌ها
آیتم “item1” از خط ردیف ۱ شروع شده و در خط ردیف ۴ تمام شود:
.item1 {
grid-row: 1 / 4;
}آیتم “item1” از ردیف ۱ شروع شود و ۲ ردیف را در بر بگیرد:
.item1 {
grid-row: 1 / span 2;
}خاصیت grid-area
خاصیت grid-area به عنوان یک خاصیت مخفف برای grid-row-start، grid-column-start، grid-row-end و grid-column-end استفاده می‌شود.
مثال‌ها
آیتم “item8” از خط ردیف ۱ و خط ستون ۲ شروع شود و تا خط ردیف ۵ و خط ستون ۶ ادامه پیدا کند:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}آیتم “item8” از خط ردیف ۲ و خط ستون ۱ شروع شود و ۲ ردیف و ۳ ستون را در بر بگیرد:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}نام‌گذاری آیتم‌های شبکه
خاصیت grid-area می‌تواند برای اختصاص نام به آیتم‌های شبکه‌ای استفاده شود.
آیتم‌های نام‌گذاری‌شده را می‌توان در خاصیت grid-template-areas کانتینر شبکه استفاده کرد.
مثال
آیتم “item1” نام “myArea” می‌گیرد و تمامی پنج ستون را در طراحی شبکه‌ای با پنج ستون در بر می‌گیرد:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}طراحی ردیف‌ها
برای تعریف دو ردیف، ستون‌های ردیف دوم را در داخل مجموعه‌ای دیگر از آپاستروف‌ها تعریف کنید.
مثال
آیتم “item1” دو ستون و دو ردیف را در بر بگیرد:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}مثال – طراحی یک قالب صفحه وب
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}ترتیب آیتم‌ها
شبکه CSS به ما این امکان را می‌دهد که آیتم‌ها را در هر مکانی که بخواهیم قرار دهیم.
اولین آیتم در کد HTML نیازی به نمایش به عنوان اولین آیتم در شبکه ندارد.
مثال
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }تغییر ترتیب آیتم‌ها برای اندازه صفحه‌های مختلف با استفاده از media query
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام