19-dars

O'zing nomla

1. Grid nima va nega Flex emas?

CSSda Grid — bu two dimensional (2D) layout tizimi.

👉 2 o'lcham degani:

• gorizontal (ustunlar)
• vertikal (qatorlar)

Grid'da sen:

• avval sahifa strukturasini chizasan
• keyin ichiga element joylaysan

Ya'ni:

Grid — layout'ni oldindan rejalash

Flex aslida nima?

Flexbox — bu one dimensional (1D) layout.

U:

• faqat bitta yo'nalishda ishlaydi
• yoki row
• yoki column

Flex:

• elementlar oqimi bilan ishlaydi
• kontentga moslashadi

Flex — ichki joylashuv uchun

Asosiy farq (muhim!)

Savol	Grid	Flex
O'lcham	2D (qator + ustun)	1D
Fikrlash	Layout markazda	Kontent markazda
Avval nima?	Struktura	Element
Sahifa darajasi	✅	❌
Component ichida	⚠️ kam	✅

Nega Grid Flex o'rnini bosa olmaydi?

Chunki ular raqib emas.

❌ Noto'g'ri fikr:

"Grid chiqdi, endi Flex kerak emas"

✅ To'g'ri fikr:

"Grid va Flex birga ishlaydi"

Misol:

• Sahifa: Grid
• Card ichidagi buttonlar: Flex

Qachon Grid tanlanadi?

Grid tanla, agar:

• layout oldindan ma'lum bo'lsa
• qator + ustun birga boshqarilsa
• responsive strukturaviy bo'lsa

Qachon Flex tanlanadi?

Flex tanla, agar:

• elementlar oqimi muhim bo'lsa
• kontent dinamik bo'lsa
• ichki joylashuv bo'lsa

2. Grid container tushunchasi

Grid o'zi-o'zidan mavjud emas. U faqat bitta shart bilan ishga tushadi:

.container {
  display: grid;
}

📌 Shu joydan:

• .container → grid container
• uning bevosita bolalari → grid item

❗ Ichkaridagi ichkarilar (nevara elementlar) Grid'ga kirmaydi.

Grid container nima?

Grid container — bu:

• layout boshqaruvchi element
• qatorlar va ustunlar faqat shu element ichida mavjud

Ya'ni:

Grid — tashqi dunyoni ko'rmaydi, u faqat container ichini boshqaradi.

Grid item kim?

<div class="container">
  <header></header>   <!-- grid item -->
  <aside></aside>     <!-- grid item -->
  <main></main>       <!-- grid item -->
</div>

📌 Bu yerda:

• header, aside, main → grid item
• ularning ichidagi elementlar → oddiy DOM

Grid container nimani boshqaradi?

Grid container faqat 3 narsani boshqaradi:

1️⃣ Qatorlar (rows) 2️⃣ Ustunlar (columns) 3️⃣ Ularning orasidagi bo'shliq (gap)

Bularsiz Grid yo'q.

Grid container = layout chizmasi

Grid'da sen:

• elementlarni joylamaysan
• maydon chizasan

Bu juda muhim tafakkur.

Misol:

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

👉 Bu kod:

• "necha element bor?" deb so'ramaydi
• strukturani e'lon qiladi

Eng ko'p qilinadigan xato ❌

.container {
  display: grid;
}

va keyin:

"Nega hech narsa o'zgarmadi?"

Sababi:

• qator va ustun yo'q