Nomlangan grid elementlari
Grid elementlarini grid-area bilan nomlash
CSS grid-template-areas — grid konteyner xossasi bo‘lib, grid maketi ichidagi maydonlarni belgilaydi.
Grid elementlarni CSS grid-area xossasi bilan nomlash, keyin shu nomga grid-template-areas xossasida murojaat qilish mumkin.
Har bir maydon apostroflar ichida belgilanadi. Har bir maydondagi nomlangan grid elementlar apostroflar ichida, probel bilan ajratilgan holda belgilanadi.
Misol
"Item1" ga "myHeader" nomini berish va uni besh ustunli grid maketida besh ustun qamrab olishiga ruxsat berish:
.container {
display: grid;
grid-template-areas: 'myHeader
myHeader myHeader myHeader myHeader';
}
.item1 {
grid-area:
myHeader;
}
Natija:
Nomsiz grid elementga ishora qilish uchun nuqta belgisidan (.) foydalanishimiz mumkin:
Misol
"myHeader"ni besh ustunli grid maketida uch ustun qamrab olishiga ruxsat berish (nuqta belgisi nomsiz elementni ifodalaydi):
.container {
display: grid;
grid-template-areas: 'myHeader
myHeader myHeader . .';
}
.item1 {
grid-area:
myHeader;
}
Natija:
Ikkita qator (ikkita maydon) belgilash uchun ikkinchi qatorni boshqa apostroflar to‘plami ichida belgilang:
Misol
"myHeader"ni ikki ustun va ikki qator qamrab olishiga ruxsat berish:
.container {
display: grid;
grid-template-areas:
'myHeader
myHeader
. . .'
'myHeader myHeader . . .';
}
.item1 {
grid-area:
myHeader;
}
Natija:
Foydalanishga tayyor veb-sahifa shablonini yaratish
Bu yerda foydalanishga tayyor veb-sahifa shablonini yaratish uchun barcha tarmoq elementlarini nomlaymiz:
Misol
Barcha grid elementlarni nomlash va foydalanishga tayyor veb-sahifa shabloni yaratish:
.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';
}
Natija:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!