Grid — template-areas, nomlangan zonalar

~15 daq · CSS · Layout — Grid

Muammodan boshlaylik

Blog sahifasi. Kompyuterda:

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

Telefonda esa hammasi ustma-ust, sidebar — maqoladan keyin:

┌──────────┐
│  header  │
├──────────┤
│  maqola  │
├──────────┤
│ sidebar  │
├──────────┤
│  footer  │
└──────────┘

21-darsda ko'radigan chiziq raqamlari bilan (grid-column: 1 / 3) buni yozish mumkin, lekin raqamlar hech narsa aytmaydi: kodni ochganda "grid-row: 2 / 3 — bu nima edi?" deb o'ylaysiz. Grid da bundan ancha ko'rgazmali usul bor — layoutni so'zlar bilan chizish.

Zonalarni chizish

.page {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "maqola  sidebar"
    "footer  footer";
  gap: 24px;
  min-height: 100dvh;
}
  • Har bir qo'shtirnoqli satr — to'rning bitta qatori
  • Satr ichidagi har bir so'z — bitta ustun (bo'shliq bilan ajratiladi)
  • Bir xil nom bir nechta katakda — shu zona ularning hammasini egallaydi

"header header" — header ikkala ustunni egallaydi. CSS kodning o'zi layoutning chizmasiga o'xshaydi.

Elementlarni zonalarga joylash

.page > header { grid-area: header; }
.page > article { grid-area: maqola; }
.page > aside  { grid-area: sidebar; }
.page > footer { grid-area: footer; }

<div class="page">
  <header>...</header>
  <article>...</article>
  <aside>...</aside>
  <footer>...</footer>
</div>

grid-area qiymati — grid-template-areas dagi nom (qo'shtirnoqsiz). Elementlarning HTML dagi tartibi endi muhim emas — har biri o'z zonasiga boradi.

Responsive — faqat xaritani almashtirish

Darsning boshidagi muammo:

.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "maqola"
    "sidebar"
    "footer";
  gap: 16px;
}

@media (min-width: 900px) {
  .page {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "maqola  sidebar"
      "footer  footer";
  }
}

Elementlarning CSS iga (grid-area) tegilmadi — faqat konteynerning "xaritasi" o'zgardi. Mobile First (25-dars): avval telefon uchun, keyin keng ekran uchun.

Yana bitta o'lcham:

@media (min-width: 1280px) {
  .page {
    grid-template-columns: 240px 1fr 300px;
    grid-template-areas:
      "header  header  header"
      "nav     maqola  sidebar"
      "footer  footer  footer";
  }
}

Bo'sh kataklar — nuqta

Katak bo'sh qolishi kerak bo'lsa — nuqta .:

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "stats  stats  chart"
    "orders .      chart"
    "orders users  users";
}

Bir nechta nuqta (...) ham bitta bo'sh katak hisoblanadi — ustunlarni tekislab yozish uchun qulay.

Qoidalar

[!WARNING] Zona to'rtburchak bo'lishi kerak. "L" shaklidagi yoki uzilgan zona — xato, va brauzer butun grid-template-areas ni e'tiborsiz qoldiradi (layout to'liq buziladi, xabarsiz).

/* ❌ "a" — L shaklida */
grid-template-areas:
  "a a"
  "a b";

/* ❌ "a" — ikki joyda, uzilgan */
grid-template-areas:
  "a b a";

/* ✅ */
grid-template-areas:
  "a a"
  "b c";

Boshqa qoidalar:

  • Har bir satrda ustunlar soni bir xil bo'lishi kerak
  • Nomlar — harflar, raqamlar, chiziqcha; raqam bilan boshlanmasin

grid-template — qisqa yozuv

Zonalar, qator balandliklari va ustun kengliklarini bitta xususiyatda:

.page {
  display: grid;
  grid-template:
    "header  header"  64px
    "maqola  sidebar" 1fr
    "footer  footer"  auto
    / 1fr    300px;
}

Har bir satr oxirida — shu qatorning balandligi, / dan keyin — ustunlar kengligi. Ixcham, lekin yangi boshlovchilar uchun alohida xususiyatlar o'qishga osonroq.

Nomlangan zonalar va chiziqlar

Zona yaratilganda Grid avtomatik nomlangan chiziqlar ham yaratadi: maqola-start va maqola-end. Ularni 21-darsdagi grid-column da ishlatish mumkin:

.banner {
  grid-column: maqola-start / sidebar-end;   /* maqoladan sidebar oxirigacha */
}

Amaliy misol: mahsulot kartochkasi

Zonalar faqat sahifa uchun emas — komponent ichida ham qulay:

<article class="product">
  <img class="product-img" src="noutbuk.jpg" alt="">
  <h3 class="product-title">Noutbuk Pro 14</h3>
  <p class="product-desc">Yengil va kuchli...</p>
  <span class="product-price">12 500 000 so'm</span>
  <button class="product-btn">Savatga</button>
</article>

.product {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  grid-template-areas:
    "img  title  price"
    "img  desc   desc"
    "img  .      btn";
  gap: 8px 16px;
}

.product-img   { grid-area: img; }
.product-title { grid-area: title; }
.product-desc  { grid-area: desc; }
.product-price { grid-area: price; }
.product-btn   { grid-area: btn; }

Bir qarashda kartochkaning tuzilishi ko'rinadi — chizma va kod bir xil.

Nima uchun shunday?

Nima uchun CSS da "ASCII-rasm" kabi g'alati sintaksis — bu jiddiy dasturlash tiliga xos emas-ku?

Chunki layout — vizual tushuncha, va uni vizual yozish eng tushunarli. Raqamli koordinatalar (grid-row: 2 / 4; grid-column: 1 / 3) mashina uchun aniq, lekin odam ularni o'qiganda boshida to'rni tasavvur qilib, chiziqlarni sanashi kerak. grid-template-areas esa kodni o'qish paytida layoutni ko'rish imkonini beradi — va eng muhimi, uni o'zgartirish ham vizual: sidebar ni chapga o'tkazish — ikki so'zning joyini almashtirish. Dizayner chizgan maketni deyarli to'g'ridan-to'g'ri kodga ko'chirish mumkin. Bu — CSS ning kam uchraydigan, lekin juda muvaffaqiyatli "o'qiladigan kod" namunasi.

Xulosa

Eslab qoling:

  • grid-template-areas — layoutni nomlar bilan chizish; har bir satr — qator, har bir so'z — ustun
  • grid-area: nom — elementni zonaga joylash; HTML tartibi muhim emas
  • Responsive — faqat konteyner xaritasini media query da almashtirish
  • . — bo'sh katak
  • Zona faqat to'rtburchak; har satrda ustunlar soni bir xil — aks holda butun xarita bekor
  • grid-template — zonalar, qatorlar va ustunlar bitta qisqa yozuvda
  • Avtomatik chiziq nomlari: nom-start, nom-end

Keyingi dars

21-dars: Grid Item — grid-column, grid-row, span