CSS

CSS Grid

CSS Grid — elementlarni qator VA ustun bo'yicha bir vaqtda joylashtirish uchun mo'ljallangan eng kuchli CSS joylashuv tizimi. Flexbox bir yo'nalishda ishlagani (qator YOKI ustun) uchun murakkab jadval kabi tuzilmalarni yasash qiyin edi. Grid esa haqiqiy ikki o'lchamli "panjara" yaratadi — bu bilan butun sahifa maketini (layout) oson qurish mumkin.

Grid va Flexbox — raqib emas, hamkor. Grid — butun sahifa maketi (ikki o'lchamli katta tuzilma) uchun; Flexbox — kichik komponent ichidagi elementlarni bir qatorga terish uchun. Ko'pincha ular birga ishlatiladi.

Grid asoslari

Konteynerga display: grid berasiz, so'ng ustunlar va qatorlarni belgilaysiz. Panjara ustun va qatorlardan tashkil topadi, ularning kesishmasi — katak (cell). Farzand elementlar shu kataklarga joylashadi.

<!-- HTML -->
<div class="panjara">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

grid-template-columns — ustunlarni belgilash

Bu xossa nechta ustun bo'lishini va ularning kengligini belgilaydi. Har bir qiymat — bitta ustun kengligi:

/* 3 ta ustun: har biri 100px */
.panjara {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

Farzandlar bu 3 ustunga birin-ketin joylashadi. To'rtinchi element avtomatik yangi qatorga o'tadi.

fr birligi — moslashuvchan ulush

fr (fraction — ulush) — Grid'ning maxsus birligi. U mavjud bo'sh joyni ulushlarga bo'ladi. Masalan 1fr 1fr 1fr — joyni teng uch ulushga bo'ladi, har bir ustun teng kenglikda:

/* 3 ta teng ustun */
.panjara {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* O'rtadagi ustun 2 barobar keng */
.panjara2 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
fr — piksellardan ustun, chunki u moslashuvchan: ekran o'lchami o'zgarganda ustunlar avtomatik moslashadi. Aralashtirish ham mumkin: grid-template-columns: 200px 1fr; — birinchi ustun qat'iy 200px, ikkinchisi qolgan barcha joyni egallaydi (masalan, yon panel + asosiy kontent).

repeat() — takrorlashni qisqartirish

Bir xil ustunni ko'p marta yozish o'rniga repeat() funksiyasidan foydalaning. repeat(3, 1fr) — "1fr'ni 3 marta takrorla" degani:

/* Bu ikkisi bir xil: */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

/* 12 ustunli maket (juda keng tarqalgan) */
.panjara {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

minmax() — eng kichik va eng katta o'lcham

minmax(min, max) ustunning eng kichik va eng katta kengligini belgilaydi. Bu responsive dizaynda juda foydali. Quyidagi mashhur uslub — ekran kengligiga qarab ustunlar sonini avtomatik moslaydigan galereya yaratadi:

.galereya {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Bu shunday o'qiladi: "Har bir ustun kamida 200px bo'lsin, joy bo'lsa 1fr'gacha cho'zilsin; nechta sig'sa, shuncha ustun avtomatik yaratilsin". Ekran torayganda ustunlar soni o'z-o'zidan kamayadi — media query'siz responsive galereya!

grid-template-rows va gap

Ustunlar kabi qatorlar balandligini grid-template-rows belgilaydi. gap esa kataklar orasidagi bo'shliqni beradi (Flexbox'dagi kabi):

.panjara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  gap: 15px;              /* barcha kataklar orasi */
  /* yoki alohida: */
  /* gap: 10px 20px;  qator-oralar 10px, ustun-oralar 20px */
}

Elementlarni joylashtirish: grid-column va grid-row

Grid'ning kuchli jihati — bitta elementni bir necha katakka cho'zish mumkin. Buni grid-column va grid-row orqali qilasiz. Panjara chiziqlari 1'dan boshlab raqamlanadi.

/* Element 1-ustundan 3-ustungacha (2 ustun eni) */
.katta {
  grid-column: 1 / 3;
}

/* span bilan: 2 ustun eni egalla */
.keng {
  grid-column: span 2;
}

/* Ham ustun, ham qator bo'yicha cho'zish */
.ulkan {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
grid-column: 1 / 3 — "1-chiziqdan 3-chiziqgacha", ya'ni ikki ustunni egallaydi. Diqqat: bu chiziq raqamlari, katak raqami emas. 3 ta ustunlik panjarada 4 ta vertikal chiziq bo'ladi (1, 2, 3, 4).

Amaliy misol: sahifa maketi

Grid butun sahifa maketini yasashga ideal: tepada sarlavha (header), chapda yon panel, o'rtada kontent, pastda futer. Bularni grid-template-areas bilan nomli hududlar orqali chizish mumkin:

.sahifa {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar kontent"
    "footer footer";
  gap: 10px;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.kontent { grid-area: kontent; }
.footer  { grid-area: footer; }

Grid va Flexbox: qaysi birini tanlash?

Ikkalasi ham joylashuv uchun, lekin ular turli vazifalar uchun optimal:

Oddiy qoida: umumiy sahifa tuzilishi uchun Grid, o'sha tuzilma ichidagi kichik komponentlar uchun Flexbox. Masalan, sahifani Grid bilan hududlarga bo'lasiz, keyin har bir hudud ichidagi menyuni Flexbox bilan tizasiz. Ular birga eng yaxshi ishlaydi.

Xulosa