Grid Container — template-columns, rows, gap, fr birlik

~20 daq · CSS · Layout — Grid

Muammodan boshlaylik

Sahifa uchun uch ustunli layout kerak: chap menyu 220px, o'ng panel 280px, o'rtadagi kontent — qolgan hammasi. Foizlar bilan urinasiz: 20% 55% 25% — lekin menyu 220px bo'lishi kerak edi, foizda u ekranga qarab o'zgaradi. calc(100% - 500px) yozasiz — keyin gap qo'shasiz va yana qayta hisoblaysiz.

Grid da bu bitta qator: grid-template-columns: 220px 1fr 280px. Sir — fr birligida.

grid-template-columns — ustunlar

Har bir qiymat — bitta ustun:

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;    /* uchta 200px ustun */
}

Istalgan birliklarni aralashtirish mumkin (11-dars):

grid-template-columns: 250px 1fr;          /* sidebar + kontent */
grid-template-columns: 1fr 2fr 1fr;        /* o'rtadagisi 2 baravar keng */
grid-template-columns: 220px 1fr 280px;    /* uch ustunli sahifa */
grid-template-columns: auto 1fr auto;      /* chetlar — kontentga qarab */

fr — bo'sh joy ulushi

fr (fraction — ulush) — konteynerdagi bo'sh joyning ulushi:

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 24px;
}

Konteyner 1200px:
  qat'iy ustunlar: 220 + 280 = 500
  gap lar:         24 × 2    = 48
  bo'sh joy:       1200 − 500 − 48 = 652  → 1fr = 652px

fr qolgan joyni gap lardan keyin hisoblaydi — calc() kerak emas. Bu % dan asosiy farqi: 33.33% × 3 + gap lar = 100% dan oshib ketadi, 1fr × 3 esa doim aniq sig'adi.

grid-template-columns: 1fr 1fr 1fr;    /* uchta teng */
grid-template-columns: 2fr 1fr;        /* 2/3 va 1/3 */
grid-template-columns: 1fr 3fr;        /* 1/4 va 3/4 */

[!INFO] 1fr aslida minmax(auto, 1fr) — ustun o'z kontentidan (masalan, uzun so'z yoki keng rasm) toraya olmaydi. Shuning uchun "teng" ustunlardan biri ba'zan kengroq bo'lib qoladi. Haqiqatan teng va kontentdan mustaqil ustunlar uchun: minmax(0, 1fr) — Flexbox dagi min-width: 0 ning Grid dagi ekvivalenti (16-dars).

repeat() — takrorlash

grid-template-columns: repeat(4, 1fr);                  /* = 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(12, minmax(0, 1fr));      /* 12 ustunli to'r */
grid-template-columns: 200px repeat(3, 1fr) 200px;      /* aralash */
grid-template-columns: repeat(2, 100px 1fr);            /* naqsh: 100px 1fr 100px 1fr */

12 ustunli to'r — ko'p dizayn tizimlarining asosi (Bootstrap ham shunday): 12 ga 2, 3, 4 va 6 bo'linadi, shuning uchun istalgan nisbat qulay olinadi.

repeat() ning eng kuchli shakli — auto-fill va auto-fit bilan avtomatik ustunlar soni — 22-dars.

grid-template-rows — qatorlar

.page {
  display: grid;
  grid-template-rows: 64px 1fr 80px;    /* header, kontent, footer */
  min-height: 100dvh;
}

Ko'pincha qatorlarni belgilamaysiz — ular kontentga qarab avtomatik yaratiladi. Belgilash kerak bo'lganda:

• Sahifa tuzilishi (header — auto, main — 1fr, footer — auto)
• Bir xil balandlikdagi qatorlar (galereya)

Yashirin (implicit) qatorlar

Elementlar belgilangan qatorlardan ko'p bo'lsa — Grid avtomatik yangi qatorlar yaratadi. Ularning o'lchamini boshqarish:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;        /* har bir avtomatik qator 200px */
}

.feed {
  grid-auto-rows: minmax(120px, auto);   /* kamida 120px, kontent ko'p bo'lsa — kattaroq */
}

grid-auto-flow: dense — bo'sh qolgan kataklarni keyingi kichik elementlar bilan to'ldiradi (masonry galereyalarga o'xshash). Tartib o'zgarishi mumkin — faqat tartib muhim bo'lmaganda ishlating.

minmax() — chegaralar

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

Birinchi ustun — kamida 200px, ko'pi bilan 300px. Kontent ko'pmi yoki ekran kengmi — chegara ichida moslashadi.

grid-template-rows: auto minmax(400px, 1fr) auto;

minmax() — auto-fill bilan birga responsive to'rning asosi (22-dars).

gap — bo'shliq

14-darsdagi Flexbox gap bilan bir xil — faqat track lar orasida, chetlarda emas:

.grid {
  gap: 24px;            /* qatorlar va ustunlar orasida */
  gap: 32px 16px;       /* qatorlar orasi 32px, ustunlar orasi 16px */
  row-gap: 32px;
  column-gap: 16px;
}

Margin lar kerak emas, collapse yo'q, fr gap ni avtomatik hisobga oladi.

Tekislash: konteyner darajasida

Grid ham Flexbox kabi tekislash xususiyatlariga ega, lekin har ikki o'q aniq:

Standart — stretch: elementlar butun katakni egallaydi.

.icons {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  justify-items: center;      /* har bir ikonka o'z katagining o'rtasida */
  align-items: center;
  justify-content: center;    /* butun to'r konteyner o'rtasida */
}

Eng qisqa markazlash

.center {
  display: grid;
  place-items: center;        /* align-items + justify-items */
  min-height: 100dvh;
}

17-darsdagi Flexbox markazlashdan ham qisqaroq — ikki qator.

Amaliy misol: forma

<form class="form">
  <label for="ism">Ism</label>
  <input id="ism">
  <label for="email">Elektron pochta</label>
  <input id="email" type="email">
  <label for="izoh">Izoh</label>
  <textarea id="izoh"></textarea>
</form>

.form {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  align-items: center;
}

           Ism │ [..............................]
Elektron pochta│ [..............................]
          Izoh │ [..............................]

• max-content — birinchi ustun eng uzun label kengligida
• Barcha input lar bitta vertikal chiziqda boshlanadi

Bu — "ikki yo'nalishda tekislash" ning klassik misoli: Flexbox bilan har bir qator mustaqil bo'lardi va input lar turli joydan boshlanardi.

Nima uchun shunday?

Nima uchun Grid uchun yangi birlik — fr — o'ylab topilgan, foizlar yetarli emasmi?

Chunki foiz — butun konteynerdan ulush, va real layoutda butun konteyner hech qachon to'liq taqsimlanmaydi: gap lar, qat'iy sidebar lar, kontentga qarab o'lchanadigan ustunlar bor. Foiz bilan bularni hisobga olish — calc() dan iborat zanjir, va har bir o'zgarishda qayta hisoblash. fr esa qolgan joyni bo'ladi: avval brauzer barcha qat'iy narsalarni (px, auto, gap) joylashtiradi, keyin nima qolsa — uni nisbatlarda taqsimlaydi. Siz nisbatni aytasiz, brauzer arifmetikani bajaradi. Bu Flexbox dagi flex-grow g'oyasi, lekin ustunlar darajasida va ancha qisqa yozuv bilan.

Xulosa

Eslab qoling:

• grid-template-columns — har bir qiymat — ustun; px, %, auto, fr aralashtiriladi
• fr — gap va qat'iy ustunlardan keyin qolgan joyning ulushi
• minmax(0, 1fr) — kontentdan mustaqil haqiqatan teng ustunlar
• repeat(4, 1fr), repeat(12, minmax(0, 1fr))
• grid-template-rows; avtomatik qatorlar — grid-auto-rows
• minmax(min, max) — chegaralangan o'lcham
• gap — faqat track lar orasida
• justify-items/align-items — kataklar ichida; place-items: center — eng qisqa markazlash
• max-content 1fr — forma label va input larini tekislash

Keyingi dars

20-dars: Grid — template-areas, nomlangan zonalar