Grid — auto-fill, auto-fit, minmax

~15 daq · CSS · Layout — Grid

Muammodan boshlaylik

Mahsulotlar katalogi: telefonda 1 ustun, planshetda 2, noutbukda 3, katta monitorda 4–5. Odatiy yechim — media query lar:

.products { grid-template-columns: 1fr; }

@media (min-width: 600px)  { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .products { grid-template-columns: repeat(5, 1fr); } }

Ishlaydi, lekin: katalog sahifaning sidebar li qismida turgan bo'lsa-chi? Ekran 1200px, lekin katalogga faqat 800px tegadi — 4 ta ustun juda tor bo'ladi. Media query lar ekranga qaraydi, konteynerga emas.

Grid da bularning hammasini bitta qator almashtiradi — media query siz, va konteyner kengligiga qarab.

Sehrli qator

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

Brauzer o'zi hisoblaydi: "konteynerga kamida 240px li nechta ustun sig'adi?" — va shuncha ustun yasaydi. Qolgan joy ustunlar orasida teng bo'linadi (1fr).

Konteyner 1300px → 5 ta ustun
Konteyner 1000px → 3 ta ustun (4 tasi gap lar bilan sig'maydi — pastda hisob)
Konteyner 600px  → 2 ta ustun
Konteyner 320px  → 1 ta ustun

Uch qismni ajratamiz.

minmax(240px, 1fr)

19-darsdan: minmax(min, max) — ustun kamida 240px, ko'pi bilan 1fr (bo'sh joyning teng ulushi).

• Ustunlar hech qachon 240px dan torayib ketmaydi — kartochka buzilmaydi
• Bo'sh joy qolsa — ustunlar kengayib, uni teng bo'lishadi

auto-fill — sig'ganicha ustun

repeat(auto-fill, ...) — aniq son o'rniga: "qancha sig'sa, shuncha ustun".

Konteyner 1000px, gap 24px, minimum 240px:
  3 ustun: 3 × 240 + 2 × 24 = 768   ✓ sig'adi
  4 ustun: 4 × 240 + 3 × 24 = 1032  ✗ sig'maydi
  → 3 ustun, har biri (1000 − 48) / 3 ≈ 317px

Konteyner o'lchami o'zgarganda — ustunlar soni o'zi o'zgaradi. Sidebar ichida bo'lsa — kamroq ustun, butun ekranda — ko'proq. Darsning boshidagi muammo hal: hisob konteynerga asoslangan.

auto-fill va auto-fit farqi

Ikkalasi ham "sig'ganicha ustun" yasaydi. Farq — elementlar kam bo'lganda (ustunlar soni elementlardan ko'p bo'lsa):

.a { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.b { grid-template-columns: repeat(auto-fit,  minmax(150px, 1fr)); }

Konteyner 1000px, faqat 2 ta element:

auto-fill — bo'sh ustunlar SAQLANADI:
┌────────┬────────┬────────┬────────┬────────┬────────┐
│   1    │   2    │ (bo'sh)│ (bo'sh)│ (bo'sh)│ (bo'sh)│
└────────┴────────┴────────┴────────┴────────┴────────┘

auto-fit — bo'sh ustunlar YO'QOLADI, mavjudlari cho'ziladi:
┌──────────────────────────┬──────────────────────────┐
│            1             │            2             │
└──────────────────────────┴──────────────────────────┘

Ko'pchilik holatlarda — auto-fill: 1 ta mahsulot qolganda u butun ekran kengligidagi ulkan kartochkaga aylanmaydi.

[!INFO] Elementlar ustunlarni to'ldirish uchun yetarli bo'lsa — auto-fill va auto-fit o'rtasida hech qanday farq yo'q. Farq faqat elementlar kam bo'lganda ko'rinadi.

Juda tor konteyner — min() bilan himoya

Konteyner 240px dan tor bo'lsa (masalan, 200px li telefon chetida), minmax(240px, 1fr) baribir 240px talab qiladi — kartochka konteynerdan chiqib ketadi va gorizontal scroll paydo bo'ladi (10-dars).

.products {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

min(240px, 100%) — "240px, lekin konteynerdan katta emas". Juda tor ekranda ustun konteyner kengligiga tushadi. Bu — responsive katalogning to'liq, "o'q o'tmas" versiyasi.

Galereya — bir xil kvadratlar

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 8px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1;        /* kvadrat */
  object-fit: cover;      /* rasm kesilib, kvadratni to'ldiradi */
  border-radius: 6px;
}

Har qanday ekranda — bir xil kvadratlar, teng bo'shliqlar, oxirgi qator ham to'g'ri tekislangan (17-darsdagi Flexbox muammosi yo'q).

Flexbox wrap bilan taqqoslash

17-darsda Flexbox bilan shunga o'xshash natija oldik: flex: 1 1 240px + flex-wrap: wrap. Farqi:

Nima uchun shunday?

Nima uchun bitta qator CSS o'nlab qator media query ni almashtira oladi — bu qanday mumkin?

Chunki u "qanday natija" ni tasvirlaydi, "qachon nima qilish" ni emas. Media query lar imperativ: "agar ekran 900px dan keng bo'lsa — 3 ustun". Siz har bir holatni oldindan o'ylab, chegaralarni qo'lda tanlaysiz — va har qanday kutilmagan kontekst (sidebar, modal, boshqa sahifadagi kichik konteyner) ularni buzadi. repeat(auto-fill, minmax(240px, 1fr)) esa deklarativ: "har bir kartochka kamida 240px bo'lsin, qolganini o'zing hal qil". Brauzer har qanday konteyner kengligi uchun natijani o'zi hisoblaydi — siz o'ylamagan o'lchamlar uchun ham. Bu "ichki responsive" (intrinsic) dizayn g'oyasi: komponent atrofga emas, o'ziga berilgan joyga moslashadi.

Xulosa

Eslab qoling:

• repeat(auto-fill, minmax(240px, 1fr)) — media query siz responsive to'r
• minmax(240px, 1fr) — kamida 240px, qolgan joyni teng bo'lishadi
• Hisob konteyner kengligiga asoslangan, ekranga emas
• auto-fill — bo'sh ustunlar saqlanadi (katalog, galereya — ko'pincha shu)
• auto-fit — bo'sh ustunlar yo'qoladi, elementlar cho'ziladi
• minmax(min(240px, 100%), 1fr) — juda tor konteynerdan chiqib ketmaslik
• Galereya: aspect-ratio: 1 + object-fit: cover

Keyingi bo'lim

5-bo'lim: Pozitsiya va Responsive — position, z-index, Mobile First va media query lar.