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

panjara-avtomatik oqim
Qiymatlar:
row
row
Avtomatik joylashtiriladigan algoritm har bir qatorni chapdan o'ngga (LTR tillari uchun) navbat bilan to'ldirib, kerak
bo'lganda yangi qatorlarni qo'shib elementlarni joylashtiradi. Odatiy qiymat.
column
column
Algoritm har bir ustunni yuqoridan pastgacha to'ldirib, kerak bo'lganda yangi ustunlarni qo'shish orqali elementlarni
tartibga soladi.
dense
dense
Elementlarni "zich" o'rash algoritmi. Agar kerak bo'lsa, bo'sh joylarni kattaroq elementlar bilan to'ldirib,
elementlarning tartibini o'zgartirishi mumkin.
.post-3
{
grid-column
:
3
;
grid-row
:
2
;
}
.post-4
{
grid-column
:
3
;
grid-row
:
3
;
}
.post-5
{
grid-column
:
2
;
grid-row
:
3
;
}
.post-6
{
grid-column
:
1
;
grid-row
:
3
;
}

---

19.08.2020
CSS tarmog'ining batafsil qo'llanmasi - mulk tavsiflari, misollar
https://html5book.ru/css-grid/
19/32
Agar rasmlar joylashtiriladigan tartibda bo'lmasa, bu xususiyat ixcham galereyalarni yaratishda foydali bo'ladi. Har bir panjara elementi
uchun brauzer oqimning boshlang'ich nuqtasidan boshlab (yuqori chap burchak, LTR tilida - chapdan o'ngga), ushbu element elementi mos
keladigan joyni topguncha, berilgan oqim yo'nalishi bo'yicha (satr yoki ustun) butun panjarani tekshiradi.
19.08.2020
CSS tarmog'ining batafsil qo'llanmasi - mulk tavsiflari, misollar
https://html5book.ru/css-grid/
20/32

---

19.08.2020
CSS tarmog'ining batafsil qo'llanmasi - mulk tavsiflari, misollar
https://html5book.ru/css-grid/
21/32
SHAKL: 4. PANJARA BUYUMLARINI AVTOMATIK JOYLASHTIRISH BILAN MASONLIK USLUBIDAGI RASMLAR GALEREYASI
3.5. Qisqa panjara belgisi
Mulk 
grid
grid
silsilasini butun aniq 
grid-template-rows
grid-template-rows
, 
grid-template-columns
grid-template-columns
va 
grid-template-areas
grid-template-areas
barcha panjara shubhasiz
xususiyatlari 
grid-auto-flow
grid-auto-flow
, 
grid-auto-rows
grid-auto-rows
va 
grid-auto-columns
grid-auto-columns
shu e'lon qildi. Bu 
row-gap
row-gap
/ xususiyatlarini qayta
tiklamaydi 
column-gap
column-gap
. Uning sintaksisi mos keladi 
grid-template
grid-template
, shuningdek panjara elementlarining avtomatik joylashishini
aniqlash uchun qo'shimcha sintaktik shakl:
Bitta eksa tarkibidagi treklarni aniq belgilash (boshqa qiymatni o'rnatish 
grid-template-rows
grid-template-rows
yoki 
grid-template-columns
grid-template-columns
berish
orqali 
none
none
) va boshqa o'qda treklarni avtomatik ravishda qanday qilib takrorlashni (boshqasini o'rnatish 
grid-auto-rows
grid-auto-rows
yoki 
grid-
grid-
auto-columns
auto-columns
sozlash orqali 
auto
auto
).
.grid-container
{
max-width
:
710px
;
margin
:
10px auto
;
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1fr
);
grid-gap
:
10px
;
grid-auto-rows
:
200px
;
grid-auto-flow
:
dense
;
}
.item5
{
grid-column
:
span 2
;
grid-row
:
span 2
;
}
.item6
{
grid-column
:
span 3
;
grid-row
:
span 2
;
}
CSS
19.08.2020
CSS tarmog'ining batafsil qo'llanmasi - mulk tavsiflari, misollar
https://html5book.ru/css-grid/
22/32
For, 
grid-auto-flow
grid-auto-flow
shuningdek, uchta haqiqiy qiymatdan biriga o'rnatiladi. Boshqa barcha subproperties 
grid
grid
dastlabki qiymatlariga
qaytariladi.