21-dars

O'zing nomla

1. grid-template-areas bilan layout

grid-template-areas nima?

Bu — Grid'ning o'qishga oson imkoniyati.

Sen:

grid-column: 1 / 3;

yozmaysan

balki layout'ni nomlaysan

Ya'ni:

"Bu joy header, bu sidebar" deb aytasan.

Eng oddiy misol

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

  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

Bu kodni o'qib:

layout ko'z oldingda chiqadi

dizaynni tushunish uchun brauzer shart emas

Elementlar qanday ulanadi?

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: content; }
footer  { grid-area: footer; }

📌 Shart:

nomlar bir xil bo'lishi kerak

har bir element faqat bitta area

❌ XATO:

grid-template-areas:
  "header header"
  "header content";

Grid buni qabul qilmaydi.

. (nuqta) nimani anglatadi?

grid-template-areas:
  "header header"
  ".      content"
  "footer footer";

👉 . — bo'sh joy

Bu:

layout'ni sindirmaydi

lekin element joylashmaydi

Responsive bilan ishlatiladimi?

HA, juda chiroyli ishlaydi 👇

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

👉 Bu keyingi darslarga ko'prik.

2. minmax() nima beradi?

Muammo (real hayotdan)

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

Hammasi yaxshi… lekin:

ekran kichrayadi

ustunlar juda tor bo'ladi

kontent siqilib, buziladi

👉 Demak:

"fr yetarli emas"

minmax() nima?

minmax() — chegara qo'yish.

Sintaksis:

minmax(min, max)

Ya'ni:

✔️ minimal chegaradan pastga tushmaydi ✔️ maksimal chegaradan oshmaydi

Eng muhim kombinatsiya

grid-template-columns: repeat(3, minmax(200px, 1fr));

Bu nimani anglatadi?

Har bir ustun:

kamida 200px

ko'p bo'lsa 1fr

📌 Grid endi:

siqilsa → to'xtaydi

joy bo'lsa → kengayadi

minmax() va fr birga qanday ishlaydi?

Muhim qoida 🧠:

fr faqat max tomonida bo'lishi mantiqli

❌ Xato:

minmax(1fr, 300px);

✅ To'g'ri:

minmax(200px, 1fr);

minmax(auto, 1fr) nimani beradi?

grid-template-columns: minmax(auto, 1fr);

Bu degani:

kontentga moslash

lekin kerak bo'lsa kengay

3. auto-fit va auto-fill farqi

Muammo (real)

grid-template-columns: repeat(3, minmax(200px, 1fr));

Savol:

ekran katta bo'lsa-chi?

kichik bo'lsa-chi?

👉 3 — bu sun'iy cheklov.

auto-fit va auto-fill nima?

Ular repeat() ichida ishlaydi:

repeat(auto-fit, minmax(200px, 1fr))
repeat(auto-fill, minmax(200px, 1fr))

Ma'nosi:

"Qancha sig'sa, shuncha ustun qil"

Avval umumiy qoidani tushun

Ikkalasi ham:

✔️ ustun sonini avtomatik hisoblaydi

✔️ minmax() bilan ishlaganda kuchli

Farq:

bo'sh ustunlar bilan nima qilishida

auto-fill qanday ishlaydi?

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Agar:

container 1200px

200px sig'sa → 6 ta ustun

Lekin:

itemlar 4 ta bo'lsa ham

6 ta ustun saqlanadi

📌 Bo'sh ustunlar joyni egallab turadi.

auto-fit qanday ishlaydi?

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Xuddi shu holatda:

bo'sh ustunlar yo'qoladi

qolgan ustunlar kengayadi

📌 Layout vizual jihatdan chiroyliroq.

Vizual farq (tasavvur qil)

auto-fill:

[██][██][██][██][  ][  ]

auto-fit:

[████][████][████][████]