CSS Grid repeat(), minmax() va auto-fill/auto-fit: media query'siz responsive to'r

Qisqacha: repeat(3, 1fr) — 1fr 1fr 1fr ning qisqa yozuvi, minmax(12rem, 1fr) — "kamida 12rem, ko'pi bilan bo'sh joy ulushi". Ular birlashsa — repeat(auto-fit, minmax(min(12rem, 100%), 1fr)): brauzer ekranga nechta ustun sig'sa, shuncha ustun chizadi, ekran eniga alohida qoida yozmasdan. auto-fill bo'sh ustunlarni saqlaydi, auto-fit ularni yig'ib kartalarni cho'zadi.

Bu darsda

• repeat() bilan uzun track ro'yxatlarini qisqa yozasiz.
• minmax() ni "kamida" va "ko'pi bilan" deb o'qiysiz va min yutganda nima bo'lishini bilasiz.
• repeat(auto-fit, minmax(...)) bilan ustunlar soni o'zi o'zgaradigan to'r qurasiz.
• auto-fill va auto-fit farqini ko'rib, qaysi birini tanlashni asoslaysiz.
• Tor ekranda toshib ketish va 1fr tuzog'ini min() va minmax(0, 1fr) bilan tuzatasiz.

Oldin bilishingiz kerak: Grid'ga kirish, Matematik funksiyalar (min()), O'lchamlar, Overflow.

1. Nega bu kerak?

Grid'ga kirish darsining oxirida portfoliongizdagi loyihalar to'rini telefonda ochgan edingiz. Ikki ustun 328 piksellik ustunda juda tor chiqdi: har kartada matn uchun 118 pikselcha joy, sarlavha har so'zda qatorga bo'linadi.

Kompyuterda ikki ustun chiroyli, telefonda esa bitta kerak. «Bahor» menyusida ham shunday: oltita taom kartasi keng ekranda oltita ustunda, planshetda to'rtta, telefonda ikkita tursa yaxshi. Har ekran uchun alohida qoida yozish mumkin — buni Media queries darsida o'rganamiz. Lekin grid bunga o'zi javob bera oladi: "karta kamida shuncha keng bo'lsin, nechta sig'sa — shuncha ustun qil".

Choyxonadagi uzun dasturxonni tasavvur qiling. Otabekka "bitta mehmonga kamida 60 santimetr joy" degan qoida berilgan. Dasturxon 2 metr bo'lsa — uch kishi o'tiradi, 3 metr bo'lsa — beshta.

Otabek har dasturxon uchun alohida buyruq kutmaydi: joyni o'lchaydi va sig'ganicha mehmon o'tqazadi. Ortib qolgan joyni esa mehmonlar orasida teng bo'ladi. Bu darsning oxiriga kelib, siz shu qoidani bitta CSS qatoriga yozasiz.

Buning uchun uchta g'isht kerak: repeat(), minmax() va auto-fit. Ularni birma-bir qo'yamiz.

2. repeat() — takrorni qisqa yozish

2.1 Oddiy takror

O'n ikki ustunli to'rni tasavvur qiling: 1fr ni o'n ikki marta yozish kerak. Xato qilish oson — o'n bir yoki o'n uch marta yozib qo'yasiz. repeat() funksiyasi buni qisqa yozadi:

.taomlar {
  grid-template-columns: repeat(12, 1fr);
}

Birinchi argument — necha marta, ikkinchisi — nimani takrorlash. repeat(3, 1fr) va 1fr 1fr 1fr brauzer uchun mutlaqo bir xil. DevTools'ning Computed bo'limida ikkalasi ham 160px 160px 160px kabi tayyor sonlarga aylanib ko'rinadi.

2.2 Naqshni takrorlash va aralashtirish

Takrorlanadigan qism bitta qiymat bo'lishi shart emas — bir nechta track ham bo'lishi mumkin:

.galereya {
  /* 1fr 2fr 1fr 2fr — tor, keng, tor, keng */
  grid-template-columns: repeat(2, 1fr 2fr);
}

.sahifa {
  /* qat'iy yon ustun + uchta teng ustun */
  grid-template-columns: 12rem repeat(3, 1fr);
}

Chrome'da tekshirdik: 600 piksellik konteynerda repeat(2, 1fr 2fr) va 1rem gap 92, 184, 92, 184 piksellik to'rtta ustun berdi. repeat() ro'yxatning istalgan joyida, boshqa track'lar orasida turishi mumkin.

Tekshirib ko'ring: grid-template-columns: 100px repeat(2, 1fr auto) 100px; — to'rda nechta ustun bor?

3. minmax() — "kamida" va "ko'pi bilan"

3.1 Ikki chegara bitta funksiyada

minmax(min, max) — track'ning eng kichik va eng katta o'lchami. U track "shu ikki chegara orasida bo'lsin" deydi. O'lchamlar darsidagi min-width va max-width ni eslang: ular elementga chegara berardi, minmax() esa track'ga beradi.

.taomlar {
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
}

O'qilishi: "uchta ustun. Har biri kamida 10rem, joy bo'lsa — bo'sh joyning bir ulushigacha o'sadi". Keng ekranda ustunlar 1fr kabi joyni teng bo'ladi. Tor ekranda esa 10rem dan torayolmaydi.

3.2 Min yutadi — va to'r toshadi

"Torayolmaydi" — bu yaxshi va yomon xabar. Konteyner uchta 10rem ustunga yetmasa nima bo'ladi?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
    gap: 1rem;
    width: 20rem;
    outline: 2px dashed var(--rang-urgu);
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<section>
  <p>Osh</p>
  <p>Lag'mon</p>
  <p>Manti</p>
</section>

Nimaga qarang: qizg'ish punktir — konteyner, 20rem (320 piksel). Uchinchi katak undan o'ngga chiqib ketdi.

Chrome'da o'lchadik: har ustun 128 piksel — 8rem, minimum. Uch ustun va ikki gap jami 416 piksel talab qiladi. minmax() ning qoidasi qat'iy: min — kafolat. U konteynerdan chiqib ketish evaziga ham bajariladi.

Demak, repeat(3, ...) bu yerda aybdor: ustunlar soni qat'iy uchta. Kerak bo'lgani — "sig'ganicha ustun". Buni pastda auto-fill va auto-fit hal qiladi.

3.3 minmax() ning qoidalari

• Min maksdan katta bo'lsa, maks e'tiborsiz qoladi. Chrome'da tekshirdik: minmax(300px, 200px) — 300 piksellik ustun.
• fr faqat maks bo'la oladi. minmax(1fr, 200px) noto'g'ri: brauzer butun deklaratsiyani tashlab ketadi va to'r bitta ustunda qoladi (Chrome'da tekshirdik). fr — "bo'sh joydan ulush", u hech narsani kafolatlay olmaydi.
• auto ikkala tomonda ham bo'la oladi. minmax(auto, 20rem) — "mazmunicha, lekin 20rem dan keng emas".

Qatorlar uchun minmax() ning eng mashhur ishlatilishi — minmax(8rem, auto): "karta kamida 8rem baland, mazmun ko'p bo'lsa — cho'ziladi". O'lchamlar darsidagi min-height ning to'rdagi jufti. Uni keyingi darsda grid-auto-rows bilan ishlatamiz.

Tekshirib ko'ring: Konteyner 500 piksel, gap yo'q, grid-template-columns: minmax(200px, 1fr) 400px. Birinchi ustun eni qancha? To'r konteynerga sig'adimi?

4. auto-fill va auto-fit — "sig'ganicha ustun"

4.1 Retsept

repeat() ning birinchi argumenti son bo'lishi shart emas. Uning o'rniga ikki kalit so'zdan birini yozish mumkin: auto-fill yoki auto-fit. Ikkalasi ham brauzerga "ustunlar sonini o'zing hisobla" deydi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<section>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p class="narx">35 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
    <p class="narx">28 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
    <p class="narx">30 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Somsa</h3>
    <p class="narx">8 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Chuchvara</h3>
    <p class="narx">25 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Ko'k choy</h3>
    <p class="narx">5 000 so'm</p>
  </article>
</section>

Tepadagi tugmalar bilan ekran enini almashtiring. Nimaga qarang: telefonda kartalar ikki ustunda, planshetda — to'rtta, kompyuterda — oltitasi bitta qatorda. Media query ham, bitta ham qo'shimcha qoida ham yo'q. Chrome'da o'lchadik: 360 piksellik ekranda ustunlar 164 pikseldan, 768 da — 176, 1280 da — 197.33.

Bu naqshni ko'pincha RAM deb atashadi — Repeat, Auto, Minmax so'zlarining bosh harflaridan. Uni Google'dan Una Kravets "bir qatorli layoutlar" ro'yxatida mashhur qilgan. Kursning Intrinsic layout darsi ham shu g'oyaga quriladi.

4.2 Brauzer qanday sanaydi

Brauzer o'z-o'ziga savol beradi: "min enli nechta ustun, orasidagi gap lar bilan birga, konteynerga sig'adi?". Maks 1fr bo'lgani uchun u sanashda qatnashmaydi — sanashda faqat min ishlaydi.

768 piksellik ekranni hisoblaymiz. body ning 8 piksellik margin'lari ayirilgach, konteyner 752 piksel. Har ustun 160 piksel (10rem) va yonida 16 piksel gap. Avval sxema, keyin har qadam:

flowchart TD
  A["Konteyner: 752 px"] --> B["Nechta ustun sig'adi?<br/>faqat min: 160 px + gap"]
  B --> C["(752 + 16) ÷ 176 = 4.36<br/>→ 4 ustun"]
  C --> D["Bo'sh joy: 752 − 3 × 16 = 704 px"]
  D --> E["Endi maks, 1fr: 704 ÷ 4 = 176 px"]

1. Nechta "ustun + gap" sig'adi: (752 + 16) ÷ (160 + 16) = 4.36 — butun qismi 4. Suratga bitta ortiqcha gap qo'shdik, chunki oxirgi ustundan keyin gap yo'q.
2. To'rtta ustun, uchta gap: 752 − 48 = 704 piksel bo'sh joy.
3. Endi maks ishlaydi — 1fr: 704 ÷ 4 = 176. Har ustun 176 piksel.

Oltita karta to'rtta ustunga sig'madi — oxirgi ikkitasi ikkinchi qatorga tushdi. Buni Grid'ga kirish darsidagi avtomatik joylashtirish qildi.

4.3 Farqi: bo'sh ustunlar bilan nima qilinadi

Hozirgi misolda auto-fill ham xuddi shunday ishlardi. Farq faqat kartalar kam bo'lganda — ular hamma ustunni to'ldira olmaganda ko'rinadi. «Bahor»da bugun faqat ikkita "Kun taomi" bor:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    outline: 2px dashed #c9d6cf;
  }
  section:first-of-type {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
  section:last-of-type {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
  span {
    color: var(--rang-urgu);
  }
</style>
<h3>auto-fill</h3>
<section>
  <p>Osh <span>35 000</span></p>
  <p>Manti <span>30 000</span></p>
</section>
<h3>auto-fit</h3>
<section>
  <p>Osh <span>35 000</span></p>
  <p>Manti <span>30 000</span></p>
</section>

Kompyuter enini tanlang. Nimaga qarang: auto-fill da ikkala karta tor va chapda, o'ng tomonda esa bo'sh joy qoldi. auto-fit da kartalar butun enni teng bo'lib oldi. Telefonda ikkala to'r bir xil — u yerga baribir faqat ikki ustun sig'adi.

Chrome'da o'lchadik, 1280 piksellik ekranda:

Ikkalasi ham avval bir xil sanaydi: yettita ustun sig'adi. Keyin yo'llari ajraladi:

• auto-fill — "to'ldir": yettita ustunni ham saqlaydi. Beshtasi bo'sh qoladi, lekin joy egallaydi.
• auto-fit — "moslashtir": bo'sh ustunlarni 0 ga "yig'ib" tashlaydi. Ularning joyi 1fr ustunlarga o'tadi va kartalar cho'ziladi. DevTools'dagi grid overlay'da bu 0 enli ustunlar chiziqlari bir-biriga yopishib turganini ko'rasiz.

4.4 Qaysi birini tanlash kerak?

• auto-fit — kartalar doim butun enni to'ldirsin: galereya, afzalliklar bloki, "Kun taomlari". Ko'p hollarda shu kerak.
• auto-fill — karta eni barqaror bo'lsin, soni kam bo'lsa ham kattalashmasin. Masalan, qidiruv natijalari: bitta topilgan mahsulot butun ekranga cho'zilib ketmasin, boshqa sahifalardagi kartalar bilan bir xil turaversin.

Mahsulot soni doim ko'p bo'lsa, farq umuman ko'rinmaydi. Shuning uchun boshlovchilar ikkalasini ko'pincha adashtiradi — va ko'pincha bu hech narsaga ta'sir qilmaydi.

4.5 Qoidalari

• Maks yoki min — aniq o'lcham bo'lsin. repeat(auto-fit, 1fr) yozib bo'lmaydi: 1fr bilan brauzer nechta ustun sig'ishini sanay olmaydi. Chrome deklaratsiyani tashlab ketadi — to'r bitta ustunda qoladi (tekshirdik).
• Qat'iy ustun ham bo'la oladi: repeat(auto-fill, 10rem) — sig'ganicha 10rem li ustun, ortgan joy o'ng tomonda qoladi. Tekis kataklar kerak bo'lsa (masalan, emoji yoki ikonkalar to'plami) qulay.
• Bitta ro'yxatda faqat bitta auto-fill yoki auto-fit bo'ladi. Uning yonida qat'iy track'lar tura oladi: 12rem repeat(auto-fit, minmax(10rem, 1fr)).

Tekshirib ko'ring: Konteyner 1000 piksel, gap: 20px, repeat(auto-fit, minmax(220px, 1fr)). Nechta ustun bo'ladi va har biri qancha?

5. Tor ekranda toshib ketish va min()

5.1 Muammo

Retseptdagi min — kafolat, buni «Min yutadi» bo'limida ko'rdik. Karta minimumi konteynerdan keng bo'lsa-chi? Masalan, kartalar kamida 18rem — 288 piksel — bo'lsin dedingiz.

Ko'p telefonlar ekrani 360 piksel, lekin eski va kichik telefonlarda 320 piksel ham uchraydi. Sahifa chetlaridagi joy va konteyner padding'i ayirilgach, to'rga 288 dan ham kam qolishi mumkin. Yoki to'r sahifaning tor yon ustunida turibdi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    gap: 1rem;
    width: 15rem;
    margin-bottom: 1.5rem;
    outline: 2px dashed var(--rang-urgu);
  }
  section:first-of-type {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
  section:last-of-type {
    grid-template-columns:
      repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<section>
  <p>❌ minmax(18rem, 1fr)</p>
  <p>Karta toshib chiqdi</p>
</section>
<section>
  <p>✅ min(18rem, 100%)</p>
  <p>Karta sig'di</p>
</section>

Nimaga qarang: ikkala konteyner 15rem (240 piksel) — qizg'ish punktir. Tepadagi kartalar undan o'ngga chiqib ketdi: ular 288 piksel, minimum shunday. Pastdagisi roppa-rosa sig'di. Haqiqiy sahifada tepadagi holat telefonda gorizontal skroll beradi — Overflow darsidagi eng yoqimsiz xato.

5.2 Yechim: min(18rem, 100%)

Matematik funksiyalar darsidagi min() ni eslang: u ikkisidan kichigini oladi va "ko'pi bilan" deb o'qiladi. Retseptdagi minimumni unga o'raymiz:

.taomlar {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
}

O'qilishi: "karta kamida 18rem, lekin konteynerdan keng emas". Bu yerdagi 100% — to'r konteynerining eni.

Keng ekranda 18rem kichikroq — u olinadi, retsept avvalgidek ishlaydi. Konteyner 18rem dan tor bo'lsa, 100% kichikroq — ustun roppa-rosa konteyner enicha bo'ladi. Chrome'da o'lchadik: 240 piksellik konteynerda ustun 240 piksel, toshish yo'q.

Bu — butun darsning eng muhim qatori. Kartalar to'ri kerak bo'lsa, deyarli har doim shuni yozasiz. Faqat ikki sonni o'zgartirasiz: kartaning eng kichik eni va gap.

Maslahat: Minimumni piksellarda emas, rem da bering. Foydalanuvchi brauzer shriftini kattalashtirsa, karta ham kengayadi va matn tor ustunga siqilib qolmaydi (O'lcham birliklari). Ustunlar soni esa o'z-o'zidan kamayadi.

6. 1fr tuzog'i: minmax(auto, 1fr)

6.1 Uzun havola ustunni kengaytiradi

Grid'ga kirish darsida "1fr mazmundan tor bo'lolmaydi" degan edik. Portfolio kartalari telefonda teng chiqmagani ham shundan edi. Endi sababini ochamiz.

Oddiy 1fr aslida qisqa yozuv. Brauzer uni minmax(auto, 1fr) deb o'qiydi. auto minimum — "mazmun sig'adigan eng tor en": eng uzun so'z yoki bo'linmaydigan bo'lak enicha. Odatda so'zlar qisqa va bu sezilmaydi. Lekin ustunga uzun havola tushsa-chi?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    display: grid;
    gap: 1rem;
    width: 24rem;
    margin-bottom: 1rem;
  }
  section:nth-of-type(1) {
    grid-template-columns: 1fr 1fr;
  }
  section:nth-of-type(2),
  section:nth-of-type(3) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  section:nth-of-type(3) p {
    overflow-wrap: anywhere;
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<section>
  <p>❌ https://example.com/menyu/toshkent-oshi</p>
  <p>1fr 1fr</p>
</section>
<section>
  <p>❌ https://example.com/menyu/toshkent-oshi</p>
  <p>minmax(0, 1fr)</p>
</section>
<section>
  <p>✅ https://example.com/menyu/toshkent-oshi</p>
  <p>+ overflow-wrap</p>
</section>

Nimaga qarang, uchta to'rga ketma-ket:

1. 1fr 1fr — ustunlar teng emas. Chrome'da o'lchadik: 384 piksellik konteynerda chap karta 262.19, o'ngdagisi 105.81 piksel. Havolaning bo'linmaydigan eng uzun bo'lagi — https://example.com/menyu/toshkent- — 242 piksel, kartaning padding'i va chegarasi bilan 262. auto minimum 1fr ulushidan (184) katta chiqdi va yutdi.
2. minmax(0, 1fr) — ustunlar teng, 184 dan. Endi minimum nol, ustun mazmunga qaramaydi. Lekin havola kartadan o'ngga toshib chiqdi: joy yetmadi, matn esa bo'linmadi.
3. minmax(0, 1fr) + overflow-wrap: anywhere — ustunlar teng, havola ham karta ichida, kerakli joyda qatorga bo'lindi.

6.2 Qaysi tuzatish qachon

Ikki xil vosita, ikki xil ish:

• minmax(0, 1fr) — track darajasida: "ustunlar doim teng bo'lsin, mazmun nima bo'lishidan qat'i nazar". Mashhur Tailwind CSS freymvorkida grid-cols-3 klassi aynan repeat(3, minmax(0, 1fr)) ni yozadi — shu sabab bilan.
• overflow-wrap: anywhere — mazmun darajasida: "uzun so'zni istalgan joyda bo'lsa bo'ladi". Uni Matnni o'rash darsida ko'rgan edingiz.

Qiziq tafsilot: Chrome'da tekshirdik, anywhere ning o'zi ham 1fr 1fr ni tenglashtiradi — u so'zning "eng tor en"ini ham kichraytiradi. Qo'shnisi overflow-wrap: break-word esa buni qilmaydi: u bilan ustunlar birinchi to'rdagidek teng bo'lmay qoldi.

Foydalanuvchi yozadigan matn — izoh, manzil, havola — tushadigan to'rda ikkalasini birga ishlating: ustunlar teng, matn ichkarida.

Retseptdagi minmax(min(18rem, 100%), 1fr) da bu tuzoq yo'q: minimum — aniq o'lcham, auto emas. Lekin karta ichidagi uzun havola baribir kartadan toshib chiqishi mumkin — overflow-wrap: anywhere u yerda ham kerak.

Tekshirib ko'ring: grid-template-columns: 1fr 1fr 1fr li to'rning ikkinchi katagiga 300 piksellik rasm tushdi, konteyner esa 600 piksel, gap yo'q. Ustunlar qanday bo'ladi? Teng bo'lishi uchun nima yozasiz?

7. Ko'p uchraydigan xatolar

7.1 repeat(auto-fit, 1fr)

Sanash uchun aniq o'lcham yo'q — deklaratsiya tashlanadi, to'r bitta ustunda qoladi. Tuzatish: repeat(auto-fit, minmax(12rem, 1fr)).

7.2 minmax(1fr, ...)

fr faqat maks bo'la oladi. Tuzatish: minimumga aniq o'lcham yoki 0.

7.3 Telefonda gorizontal skroll

minmax(20rem, 1fr) — minimum ekrandan keng. Tuzatish: minmax(min(20rem, 100%), 1fr).

7.4 auto-fill bilan "kartalar cho'zilmayapti"

Kartalar kam, ular chapda tor turibdi, o'ngda bo'sh joy. Bu xato emas, auto-fill shunday. Tuzatish: kartalar enni to'ldirsin desangiz — auto-fit.

7.5 Uzun so'z yoki havola ustunni kengaytirdi

1fr ustunlar teng emas. Tuzatish: minmax(0, 1fr) va matnga overflow-wrap: anywhere.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Nechta ustun?

To'r: repeat(auto-fit, minmax(200px, 1fr)), gap: 16px. Konteyner eni berilgan — nechta ustun bo'ladi?

1. 300 piksel —
2. 416 piksel —
3. 800 piksel —
4. 1300 piksel —

Ishora: «Brauzer qanday sanaydi» dagi formula — (konteyner + gap) ÷ (min + gap), butun qismi.

2-mashq (o'rta): «Bahor» galereyasi

«Bahor»ning "Zalimiz" bo'limida suratlar to'ri kerak. Hozircha rasm o'rniga gradientli bloklar (Gradientlar). Talablar:

• har blok kamida 9rem keng, 4 / 3 nisbatda (O'lchamlar dagi aspect-ratio);
• suratlar soni har xil bo'ladi — 2 tadan 12 tagacha. Kam bo'lganda ham bloklar kattalashib ketmasin, boshqa sahifadagi galereya bilan bir xil o'lchamda tursin;
• 300 piksellik konteynerda ham toshmasin.

auto-fill yoki auto-fit — qaysi birini tanlaysiz va nega?

Ishora: "kattalashib ketmasin" — bo'sh ustunlar saqlansin. Toshmaslik — min(..., 100%).

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns:
      repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    gap: 0.5rem;
  }
  div {
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem;
    background: linear-gradient(
      135deg, var(--rang-asosiy), var(--rang-urgu)
    );
  }
</style>
<h2>Zalimiz</h2>
<section>
  <div></div>
  <div></div>
  <div></div>
</section>

3-mashq (qiyin): Buzilgan sharhlar to'ri

Stajyor «Bahor»ning mijozlar sharhlari uchun shunday to'r yozdi:

.sharhlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  gap: 1rem;
}

Uni tuzatgach, yangi muammo chiqdi: bitta mijoz sharhiga Instagram havolasini qo'shgan (https://example.com/instagram/bahor_choyxonasi_toshkent), va uning kartasi boshqalardan keng chiqdi. 320 piksellik telefonda esa sahifa gorizontal suriladi.

1. Nega birinchi variant umuman to'r bermaydi?
2. Kartalar kamida 16rem bo'lsin, soni sig'ganicha, kam bo'lsa — cho'zilsin. Hamma muammoni hal qiladigan to'liq CSS'ni yozing.
3. Havola qatorga bo'linishi uchun nimani qo'shasiz?

Ishora: auto-fit ga aniq o'lcham kerak («Qoidalari»). Telefon — min(). Havola — «Qaysi tuzatish qachon».

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .sharhlar {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1rem;
  }
  .sharhlar article {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
    overflow-wrap: anywhere;
  }
</style>
<section class="sharhlar">
  <article>
    <h3>Malika</h3>
    <p>Eng mazali osh shu yerda!</p>
  </article>
  <article>
    <h3>Jasur</h3>
    <p>Choyi ham, xizmati ham a'lo. Suratlar:
    https://example.com/instagram/bahor_choyxonasi_toshkent</p>
  </article>
</section>

4-mashq: Portfolio qadami — telefonga mos loyihalar to'ri

O'tgan darsda loyihalar to'ri ikki qat'iy ustunli bo'ldi va telefonda siqilib qoldi. Uni retseptga almashtiring:

1. .loyihalar da 1fr 1fr o'rniga: karta kamida 16rem, sig'ganicha ustun, kam bo'lsa — cho'zilsin, tor ekranda toshmasin.
2. DevTools'ning qurilma rejimida (device mode) 360, 768 va 1280 piksel enida sahifani oching. Har birida nechta ustun bo'ldi?
3. Hisoblang: main ustuni kompyuterda qancha keng bo'lishi kerakki, uchta karta bir qatorga sig'sin? Hozirgi 70ch ustunda uchinchi loyiha qo'shsangiz, u qayerga tushadi?

Ishora: «Yechim: min(18rem, 100%)» dagi qator. gap o'tgan darsdagidek 1.5rem. 3-band — «Brauzer qanday sanaydi» dagi formulani teskari ishlating.

/* Loyihalar to'ri: sig'ganicha ustun, telefonda — bitta */
.loyihalar {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-chegara: #c9d6cf;
    --rang-fon-och: #e8f1ec;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  :where(h1, h2) {
    color: var(--rang-asosiy);
  }
  .loyihalar {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1.5rem;
  }
  .loyihalar > article {
    padding: 0.25em 1em;
    border: 1px solid var(--rang-chegara);
    border-radius: 0.5rem;
  }
  .loyihalar > article:first-child {
    background-color: var(--rang-fon-och);
  }
</style>
<main id="asosiy">
  <h1>Loyihalar</h1>
  <div class="loyihalar">
    <article>
      <h2>Choyxona «Bahor» sayti</h2>
      <p><time datetime="2026-09">2026-yil sentabr</time></p>
      <p>To'rt sahifali sayt: menyu jadvali, stol band qilish
      formasi va 404 sahifasi. Validatordan xatosiz o'tgan.</p>
    </article>
    <article>
      <h2>Semantik blog maqolasi</h2>
      <p><time datetime="2026-08">2026-yil avgust</time></p>
      <p>"Osh sirlari" maqolasi: landmarklar, sarlavhalar daraxti
      va izohli rasmlar.</p>
    </article>
  </div>
</main>

9. Real ishda

• Onlayn do'konlar — mahsulot kartalari to'ri. Istalgan katalogni DevTools'da ochib, kartalar otasining grid-template-columns qiymatiga qarang: ko'pincha u yerda repeat() va minmax() turadi.
• Blog va yangiliklar saytlari maqola kartalarini RAM retsepti bilan teradi — bitta qator CSS, uchta qurilma.
• Dizayn tizimlari — "auto grid" yoki "card grid" komponenti ichida aynan shu qator turadi. Faqat minimum sozlanadi.
• Intervyuda so'raladi: "Media query'siz responsive kartalar to'rini qanday qilasiz?", "auto-fill va auto-fit farqi?", "Nega 1fr ustunlar ba'zan teng emas?". Oxirgisi — tajribali dasturchini boshlovchidan ajratadigan savol.

Xulosa

• repeat(n, ...) — takrorni qisqa yozadi, naqsh ham takrorlanadi: repeat(2, 1fr 2fr).
• minmax(min, max) — track chegarasi; min — kafolat, konteynerdan toshsa ham. fr faqat maks bo'ladi.
• repeat(auto-fit, minmax(min(12rem, 100%), 1fr)) — sig'ganicha ustun, media query'siz; min() tor ekranda toshishdan saqlaydi.
• auto-fill bo'sh ustunlarni saqlaydi, auto-fit ularni yig'ib kartalarni cho'zadi; farq faqat kartalar kam bo'lganda ko'rinadi.
• 1fr = minmax(auto, 1fr): uzun so'z ustunni kengaytiradi. Teng ustunlar — minmax(0, 1fr), uzun matn — overflow-wrap: anywhere.

Keyingi dars: Elementlarni joylashtirish — elementni aniq chiziqqa qo'yish, bir necha katakni egallatish va brauzer o'zi qo'shadigan qatorlarni boshqarish.

Manbalar

• MDN: "repeat()", "minmax()", "Auto-placement in grid layout", "grid-template-columns" — developer.mozilla.org
• W3C: "CSS Grid Layout Module Level 2", 7.2.3.2 Repeat-to-fill: auto-fill and auto-fit repetitions — w3.org/TR/css-grid-2
• web.dev: Una Kravets, "Ten modern layouts in one line of CSS" (RAM naqshi) — web.dev/articles/one-line-layouts
• Tailwind CSS hujjati: "grid-template-columns" — tailwindcss.com/docs/grid-template-columns