Css tarmog'ining batafsil qo'llanmasi mulk tavsiflari, misollar

panjara-shablon
Qiymatlar:
.grid-container
{
display
:
grid
;
grid-template-areas
:
"post-1 post-1 post-2"
"post-1 post-1 post-3"
"post-6 post-5 post-4"
;
grid-template-rows
:
repeat
(
3
,
200px
);
grid-template-columns
:
repeat
(
3
,
1fr
);
}
.post-1
{
grid-area
:
post-1
;
}
.post-2
{
grid-area
:
post-2
;
}
.post-3
{
grid-area
:
post-3
;
}
.post-4
{
grid-area
:
post-4
;
}
.post-5
{
grid-area
:
post-5
;
}
.post-6
{
grid-area
:
post-6
;
}
CSS

---

19.08.2020
CSS tarmog'ining batafsil qo'llanmasi - mulk tavsiflari, misollar
https://html5book.ru/css-grid/
15/32
none
none
Uchala xususiyatlarning barchasini dastlabki qiymatlariga o'rnatadi 
none
none
.
qiymati 
grid-template-rows / grid-
grid-template-rows / grid-
template-columns
template-columns
Silsilasini 
grid-template-rows
grid-template-rows
ikkala qiymati 
grid-template-columns
grid-template-columns
belgilangan
qadriyatlarga va 
grid-template-areas
grid-template-areas
qiymatiga 
none
none
.
panjara chizig'i nomlariyoki tirnoq va trek
o'lchamiga yokiidentifikatorlarning ketma-
ketligi yokibelgilangan panjarachiziqlari yoki +
/ aniqizlar ro'yxati
Silsilasini 
grid-template-areas
grid-template-areas
sanab identifikator tartiblash uchun. Silsilasini 
grid-
grid-
template-rows
template-rows
belgilangan iz o'lchamlarini uchun (tashqari identifikatorlari har bir ketma-
ketlikda quyidagi ko'rsatilgan qadriyatlar
auto
auto
nomidagi hidoyat chiziqlari hech qanday
yo'qolgan registri uchun) va birlashtiradi har bir o'lchov avval / so'ng
belgilangan. Silsilasini 
grid-template-columns
grid-template-columns
(ko'rsatilmagan bo'lsa yoki hech) tracklist
uchun oldinga egri chiziq keyin belgilangan.
Tanlovlar
.grid-container
{
display
:
grid
;
grid-template
:
repeat
(
3
,
200px
)
/
repeat
(
3
,
1fr
);
}
.post-1
{
grid-row-start
:
1
;
grid-row-end
:
3
;
grid-column-start
:
1
;
grid-column-end
:
3
;
}
.post-2
{
grid-row-start
:
1
;
grid-row-end
:
2
;
grid-column-start
:
3
;
grid-column-end
:
4
;
}
...
CSS
.grid-container
{
display
:
grid
;
CSS
19.08.2020
CSS tarmog'ining batafsil qo'llanmasi - mulk tavsiflari, misollar
https://html5book.ru/css-grid/
16/32
repeat()
repeat()
Agar nomlangan panjara joylari ishlatilsa, funktsiya ushbu xususiyatda kuzatuv ro'yxatini aniqlashga ruxsat berilmaydi (panjara
shunchaki chizilmaydi).
3.4. Yashirin panjara
3.4.1. Avtomatik to'rli izlar
Agar panjara elementi aniq o'lchamlarga ega bo'lmagan qator yoki ustunda bo'lsa 
grid-template-rows
grid-template-rows
yoki 
grid-template-columns
grid-template-columns
uni
saqlash uchun yashirin panjara izlari yaratilsa. Agar satr yoki ustun belgilangan panjara o'lchamlaridan tashqarida bo'lsa, bu sodir bo'lishi
mumkin.
Odatiy bo'lib, ushbu avtomatik qo'shilgan treklar minimal talab qilinadigan hajmda. Xususiyatlar 
grid-auto-rows
grid-auto-rows
va 
grid-auto-
grid-auto-
columns
columns
panjara ustidagi yashirin treklarning hajmini boshqarishga imkon beradi Agar bir nechta trek o'lchamlari berilsa, kerak bo'lganda
trekning o'lchamini topish uchun naqsh takrorlanadi. Shaffof panjardan keyin birinchi yashirin panjara izi birinchi belgilangan o'lchamni
oladi va hokazo. Xususiyatlar meros qilib olinmagan.