Chapter 10 — Grid va Responsive Layout

---

10.1 Asosiy Grid Klasslari

Example

index.html
HTMLNusxalash
01<div class="grid grid-cols-3 gap-4">
02  <div class="bg-gray-100 p-4">1</div>
03  <div class="bg-gray-100 p-4">2</div>
04  <div class="bg-gray-100 p-4">3</div>
05</div>

10.2 Responsive Grid

Example

index.html
HTMLNusxalash
01<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
02  <div class="bg-white rounded-lg shadow p-4">Mahsulot 1</div>
03</div>

Real-world Usage

Bu — mahsulotlar ro'yxati, blog kartalari uchun sanoat standarti bo'lgan responsive grid naqshi.

⚠️ Common Mistake
Bir o'lchamli (faqat qator) layout uchun Grid ishlatish — Flexbox yetarli bo'lardi, ortiqcha murakkablik.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: grid grid-cols-3 gap-4 bilan 6 ta katakcha yarating.

🟡 Exercise 2 — Medium

Task: "Image Gallery" yarating: mobilda 2 ustun, planshetda 3, desktopda 4 ustun.

🔴 Exercise 3 — Hard

Task: Sidebar + Content layout yarating (md:col-span-1 / md:col-span-3), mobilda ustma-ust joylashadigan qilib.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="grid grid-cols-3">
02  <div class="col-span-5">Element</div>
03</div>

Your Task: Nima uchun bu kutilganidek ishlamaydi?

<details> <summary>Solution</summary> Konteynerda faqat 3 ustun bor, lekin element 5 ustunni so'ramoqda — bu mavjud maksimal qiymatdan katta. `col-span-*` doim `grid-cols-*` dan kichik yoki teng bo'lishi kerak. </details>

---

📌 Chapter Summary

Grid — ikki o'lchamli (qator+ustun) layout uchun, Flexbox — bir o'lchamli uchun. grid-cols-1 md:grid-cols-3 — responsive grid qurishning standart formulasi.

🎯 Key Takeaways

• col-span-* elementni bir nechta ustunga cho'zish uchun
• Responsive grid — mobile-first breakpoint zanjiri orqali quriladi
• Grid murakkab, ikki o'lchamli tuzilmalar uchun tabiiy tanlov

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Konteyner: grid, grid-cols-{1-12}
02Elementlar: col-span-*, row-span-*
03Bo'shliq:  gap-*, gap-x-*, gap-y-*
04Responsive: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

---