20-dars

O'zing nomla

1. Qator va ustunlar qanday ishlaydi?

Grid — bu chiziqlar tizimi

Ko'pchilik Grid'ni:

"kataklar"

deb o'ylaydi ❌

Aslida esa Grid — chiziqlar (lines).

| 1 | 2 | 3 |
--------------
|   |   |   |
--------------
|   |   |   |

Vertikal chiziqlar → columns

Gorizontal chiziqlar → rows

Kataklar — bu chiziqlar orasidagi natija

grid-template-columns

.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
}

Bu nimani anglatadi?

3 ta ustun

• 1-ustun → 200px
• 2-ustun → qolgan joy
• 3-ustun → 100px

👉 Bu joylashuv element soniga bog'liq emas.

grid-template-rows

.container {
  grid-template-rows: auto 1fr auto;
}

• 1-qator → kontentga qarab
• 2-qator → qolgan joy
• 3-qator → kontentga qarab

📌 Header / content / footer uchun ideal.

Elementlar qanday joylashadi?

Grid item'lar avtomatik joylashadi:

• Chapdan o'ngga
• Yuqoridan pastga

Ya'ni:

"bo'sh joy qidirib joylashadi"

Bu grid auto-placement deyiladi.

Vizual tasavvur (muhim!)

grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;

👇 Natija:

+-------+-------+
| item1 | item2 |
+-------+-------+
| item3 | item4 |
+-------+-------+

📌 Agar item 5 bo'lsa:

yangi qator avtomatik yaratiladi

Qator yoki ustun ko'rsatilmasa nima bo'ladi?

grid-template-columns: 1fr 1fr;

Qatorlar implicit bo'ladi

Brauzer ularni auto qilib yaratadi

👉 Bu keyinchalik muammo chiqarishi mumkin.

2. fr birligi nimani anglatadi

fr bu "foiz" emas

Eng katta xato ❌:

1fr = 50%

YO'Q.

fr — bu "free space" ulushi.

Ya'ni:

fr — bo'sh qolgan joyni taqsimlash birligi

Grid joyni qanday hisoblaydi?

Grid hisoblash tartibi:

1️⃣ Avval qat'iy o'lchamlar olinadi

2️⃣ Keyin kontentga bog'liq o'lchamlar (auto)

3️⃣ Oxirida qolgan joy fr ga bo'linadi

📌 fr eng oxirida ishlaydi.

Oddiy misol

grid-template-columns: 200px 1fr;

Container kengligi: 1000px

• 200px → birinchi ustun
• Qoldi: 800px
• 1fr → 800px

Bir nechta fr bo'lsa-chi?

grid-template-columns: 1fr 2fr 1fr;

Qolgan joy: 1000px

Ulush:

1 + 2 + 1 = 4fr

Hisob:

• 1fr → 250px
• 2fr → 500px
• 1fr → 250px

👉 nisbat muhim, aniq qiymat emas.

fr va auto farqi

grid-template-columns: auto 1fr;

• auto → kontent qancha bo'lsa, shuncha
• 1fr → qolgan joy

📌 Agar kontent katta bo'lsa:

• auto kengayadi
• fr siqiladi

fr qachon xavfli bo'ladi?

grid-template-columns: 1fr 1fr;

Agar:

bir item ichida uzun text bo'lsa

👉 Grid:

ustunni kengaytiradi

layout buzilgandek ko'rinadi

📌 Sabab:

fr minimum content size ni hisobga oladi

Bu keyingi minmax() darsiga ko'prik

fr va Flex farqi (muhim!)

Xususiyat	Grid (fr)	Flex (flex: 1)
Qaraydi	Bo'sh joyga	Kontentga
Hisoblash	Oldindan	Dinamik
Markaz	Layout markazda	Element markazda