Chapter 10 — CSS Grid Chuqur O'rganish

---

10.1 grid-template-columns va fr Birligi

Example

styles.css
CSSNusxalash
01.grid {
02  display: grid;
03  grid-template-columns: 1fr 2fr 1fr;
04  gap: 16px;
05}

10.2 minmax() va grid-area

Example

styles.css
CSSNusxalash
01.responsive-grid {
02  display: grid;
03  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
04  gap: 16px;
05}
06 
07.layout {
08  display: grid;
09  grid-template-areas:
10    "header header"
11    "sidebar content"
12    "footer footer";
13}
14.header { grid-area: header; }

⚠️ Common Mistake
repeat(auto-fit, minmax(...)) va repeat(auto-fill, minmax(...))ni farqlamaslik — ular bo'sh joy bilan turlicha ishlaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: grid-template-columns: 1fr 1fr 1fr bilan 3 ustunli grid yarating.

🟡 Exercise 2 — Medium

Task: repeat(auto-fit, minmax(200px, 1fr)) yordamida responsive kartochka grid yarating — brauzer o'lchamini o'zgartirib, ustunlar sonining avtomatik moslashishini kuzating.

🔴 Exercise 3 — Hard

Task: grid-template-areas yordamida to'liq sahifa layout yarating: header, sidebar, content, footer.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.grid { display: grid; grid-template-columns: 200px 200px 200px; }

Your Task: Ekran torayganda ustunlar konteynerdan chiqib ketmoqda. Qanday tuzatasiz?

<details> <summary>Solution</summary> Qattiq piksel qiymatlar responsive emas. Yechim: `grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));` — bu ustunlarni ekran kengligiga moslashtiradi. </details>

---

📌 Chapter Summary

fr birligi bo'sh joyni proportsional taqsimlaydi. minmax() responsive chegaralar beradi. grid-template-areas layoutni vizual, o'qilishi oson tarzda belgilaydi.

🎯 Key Takeaways

• repeat(auto-fit, minmax(...)) — responsive grid yaratishning eng qulay usuli
• fr piksel/foizdan ko'ra moslashuvchanroq
• grid-template-areas murakkab layoutlarni tushunarli qiladi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01grid-template-columns: repeat(N, 1fr);
02grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
03grid-template-areas: "header header" "sidebar content";

---