Grid nima va Flexbox dan qachon farq qiladi

~10 daq · CSS · Layout — Grid

Muammodan boshlaylik

17-darsdagi kartochkalar mashqini eslang: Flexbox bilan 7 ta kartochka 3 tadan joylashganda, oxirgi qatordagi bitta kartochka butun kenglikka cho'zilib ketdi. Yoki uni to'xtatsangiz — ustunlar bir-biri bilan tekislanmaydi.

Yana bir vazifa — klassik sahifa:

┌──────────────────────────────────────┐
│               header                 │
├──────────┬───────────────────────────┤
│          │                           │
│ sidebar  │          main             │
│          │                           │
├──────────┴───────────────────────────┤
│               footer                 │
└──────────────────────────────────────┘

Flexbox bilan buni qilish uchun ichma-ich konteynerlar kerak: tashqi column, uning ichida row. Har bir o'zgarish — HTML tuzilmasini o'zgartirish.

Bu masalalarning umumiy jihati: ular ikki o'lchamli — qatorlar va ustunlar birgalikda tekislanishi kerak. Buning uchun — CSS Grid.

Grid — ikki o'lchamli layout

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

Konteyner uchta teng ustunli to'rga aylandi. Bolalar avtomatik ravishda kataklarga joylashadi: birinchi uchtasi — birinchi qatorga, keyingisi — ikkinchi qatorga va hokazo.

┌────────┬────────┬────────┐
│   1    │   2    │   3    │
├────────┼────────┼────────┤
│   4    │   5    │   6    │
├────────┼────────┴────────┘
│   7    │   ← oxirgisi faqat o'z katagini egallaydi, cho'zilmaydi
└────────┘

Flexbox dagi "oxirgi qator" muammosi yo'q: har bir element — o'z ustunida.

Grid atamalari

       1-chiziq   2-chiziq   3-chiziq   4-chiziq
          │          │          │          │
          ▼          ▼          ▼          ▼
1-chiziq ─┼──────────┼──────────┼──────────┼─
          │  katak   │          │          │   ← track (qator)
2-chiziq ─┼──────────┼──────────┼──────────┼─
          │          │   gap    │          │
3-chiziq ─┼──────────┼──────────┼──────────┼─
                     ↑
                  track (ustun)

Chiziq raqamlari — 21-darsda elementlarni joylashtirish uchun kerak bo'ladi: 3 ustunli to'rda 4 ta vertikal chiziq bor.

Asosiy farq: kontentdan yoki joylashuvdan

Flexbox yaxshiroq

• Elementlar soni va o'lchami noma'lum, ular kontentga qarab joylashsin: menyu havolalari, teglar, tugmalar
• Bitta qator yoki bitta ustun: header, toolbar, kartochka ichi
• "Qolgan joyni egalla" mantiqi: qidiruv input

Grid yaxshiroq

• Sahifa tuzilishi: header, sidebar, main, footer
• Bir xil ustunlardagi elementlar: galereya, kartochkalar ro'yxati, mahsulotlar katalogi
• Elementlar ikki yo'nalishda tekislanishi kerak: formalar (label lar bitta ustunda, input lar boshqasida), dashboard
• Elementlar bir-birining ustiga tushishi kerak (rasm ustida matn)

Birga ishlatish — odatiy holat

.page {
  display: grid;                       /* sahifa tuzilishi — Grid */
  grid-template-columns: 250px 1fr;
}

.header {
  display: flex;                       /* header ichi — Flexbox */
  justify-content: space-between;
  align-items: center;
}

.products {
  display: grid;                       /* mahsulotlar to'ri — Grid */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.product-card {
  display: flex;                       /* kartochka ichi — Flexbox */
  flex-direction: column;
}

Qoida: Grid — makro (sahifa va to'rlar), Flexbox — mikro (komponentlar ichi). Lekin bu qat'iy emas — qaysi biri kamroq kod bilan aniqroq natija bersa, o'sha.

Klassik sahifa — Grid bilan

<div class="layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100dvh;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

HTML — tekis, ichma-ich konteynerlarsiz. Butun tuzilma CSS da chizilgan — grid-template-areas sahifaning xaritasiga o'xshaydi. Telefon uchun boshqa xarita yozish kifoya (20-dars).

DevTools — Grid ni ko'rish

Brauzer DevTools da grid konteyner yonida grid belgisi bor — bosing: sahifada chiziqlar, ularning raqamlari va zona nomlari chiziladi. Grid bilan ishlashda bu juda yordam beradi — to'r ko'rinmas, va uni tasavvur qilish ko'pincha chalkash.

Nima uchun shunday?

Agar Grid ikki o'lchamli va kuchliroq bo'lsa, nima uchun Flexbox kerak — hamma narsani Grid bilan qilsa bo'lmaydimi?

Ko'p narsani bo'ladi, lekin ular turli savollarga javob beradi. Grid so'raydi: "qanday to'r kerak?" — siz ustun va qatorlarni oldindan belgilaysiz, elementlar unga moslashadi. Flexbox so'raydi: "elementlar qanday joy bo'lishsin?" — elementlar o'z kontentiga qarab o'lcham oladi, konteyner faqat bo'sh joyni taqsimlaydi. Menyu havolalari uchun to'r chizish ortiqcha — ularning soni va kengligi o'zgaradi, va Flexbox buni tabiiy hal qiladi. Sahifa tuzilishi uchun esa "kontentga qarab" yondashuv beqaror — sidebar ichidagi matn uzunligiga qarab butun sahifa siljimasligi kerak. Ikkala vosita ham kerak, va ular bir-birini to'ldiradi.

Xulosa

Eslab qoling:

• display: grid — ikki o'lchamli to'r: qatorlar va ustunlar
• Atamalar: chiziq (1 dan), track, katak, zona, gap
• Flexbox — kontentdan (elementlar boshqaradi), Grid — joylashuvdan (konteyner boshqaradi)
• Grid: sahifa tuzilishi, galereyalar, ikki yo'nalishda tekislash, ustma-ust elementlar
• Flexbox: menyu, toolbar, komponent ichi, noma'lum sondagi elementlar
• Birga: Grid — makro, Flexbox — mikro
• DevTools dagi grid belgisi — to'rni ko'rish

Keyingi dars

19-dars: Grid Container — template-columns, rows, gap, fr birlik