Bosh sahifa / Dasturlash / Grid o'yini
DARSLAR + 20 DARAJA

Qutilarni Grid bilan joylashtiring

CSS Grid ikki o'lchovli katak tizimi: qatorlar va ustunlar. Har darajada qutilarni to'g'ri katakka qo'yish uchun konteynerga display: grid va boshqa xossalarni yozasiz. Yozganingiz darrov jonli ko'rinadi.

Jonli katak muharriri columns, rows, gap, span, areas Har qadamda jonli animatsiya

Har bir Grid xossasini qutilar misolida jonli ko'ring: katak tizimi qanday quriladi va nima o'zgaradi. Keyin «Amaliyot» ga o'ting.

1
2
3
4
display: grid
display: grid

Katak tizimi shu yerdan boshlanadi

Konteynerga display: grid bersangiz, u katak tizimiga aylanadi va qutilar (grid-elementlar) qator va ustunlarga joylashadi. Flexbox bir o'qli, Grid esa ikki o'lchovli (qator + ustun).

.maydon {
  display: grid;
}
1
2
3
4
5
6
grid-template-columns

Ustunlarni belgilash

grid-template-columns nechta ustun va ular qanday kenglikda bo'lishini belgilaydi. 1fr = bo'sh joyning bir ulushi. repeat(3, 1fr) = uchta teng ustun. Aralashtirsa ham bo'ladi: 100px 1fr.

grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
1
2
3
4
5
6
grid-template-rows

Qatorlarni belgilash

grid-template-rows qatorlarning balandligini belgilaydi. Belgilamasangiz, qatorlar avtomatik (kontent bo'yicha) hosil bo'ladi. 1fr 1fr ikki qatorni butun balandlikka teng bo'ladi.

grid-template-rows: 1fr 1fr;
grid-template-rows: 80px 120px;
1
2
3
4
5
6
gap

Kataklar orasidagi bo'shliq

gap kataklar orasiga teng bo'shliq qo'yadi. Alohida boshqarmoqchi bo'lsangiz: column-gap (ustunlar orasi) va row-gap (qatorlar orasi).

gap: 16px;
column-gap: 24px; row-gap: 8px;
1
2
3
4
5
6
justify-items

Katak ichida gorizontal joylash

justify-items har bir qutini o'z katagi ichida gorizontal (chap-o'ng) bo'ylab joylaydi: start, center, end. Standart qiymati stretch.

justify-items: center;
justify-items: end;
1
2
3
4
5
6
align-items

Katak ichida vertikal joylash

align-items qutilarni katak ichida vertikal (yuqori-past) bo'ylab joylaydi: start, center, end. Ikkalasini birga: place-items: center = ham gorizontal, ham vertikal markaz.

align-items: center;
place-items: center;
1
2
3
justify-content

Butun katak tizimini joylash

Agar kataklar konteynerdan kichik bo'lsa, justify-content butun tizimni gorizontal joylaydi, align-content esa vertikal. Bu justify-items dan farq qiladi: u alohida qutini emas, butun to'plamni suradi.

justify-content: center;
align-content: space-between;
1
2
3
4
5
grid-column · span

Bir necha katakni egallash

grid-column quti xossasi: u nechta ustunni egallashini belgilaydi. span 2 = ikki ustun kengligida. Qatorlar uchun grid-row: span 2. Chiziq raqamlari bilan ham bo'ladi: grid-column: 1 / 3.

.quti1 {
  grid-column: span 2;
}
1,1
1,2
1,3
2,1
2,2
2,3
chiziqlar bilan joylash

Aynan kerakli katakka

Grid chiziqlari (liniyalari) 1 dan boshlab raqamlanadi. Qutini aynan bir katakka qo'yish uchun grid-column va grid-row ni birga bering. grid-column: 3 va grid-row: 2 = 3-ustun, 2-qator.

.quti1 {
  grid-column: 3;
  grid-row: 2;
}
hd
sd
mn
ft
grid-template-areas

Kataklarga nom berib layout

grid-template-areas kataklarga nom berib, butun sahifa qolipini ko'z bilan chizadi. Har element grid-area: nom oladi, konteyner esa qatorlarni matn kabi yozadi. Header, sidebar, footer shunday quriladi.

grid-template-areas:
  "hd hd"
  "sd mn"
  "ft ft";

Tayyormisiz? 🎯

Endi bilimni sinab ko'ring: 20 darajali amaliyotda kod yozib qutilarni kataklariga qo'yasiz.

Maydon display: grid

Ajoyib!

Qutilar katagiga tushdi.

1Quti (grid-element) Uy (katak)
Vazifa
.maydon CSSJonli
Tushuntirish
Yordam kerakmi?