1.4-bob: CSS Grid (chuqur), positions, container va width

1-QISM — HTML, CSS va zamonaviy stillar · 4-mavzu

1. Kirish va motivatsiya

Oldingi bobda 1.3-bob Flexbox bilan elementlarni bir o'lcham bo'ylab (qator yoki ustun) joyladik. Lekin murakkab sahifa — masalan dashboard yoki gazeta layout'i — ikki o'lchamni bir vaqtda talab qiladi: qatorlar va ustunlar birga, "to'r" (grid) ko'rinishida. Aynan shu yerda CSS Grid ishga tushadi.

CSS Grid Layout — sahifani ikki o'lchamli to'rga (qator × ustun) bo'lib, elementlarni aniq kataklarga joylashtirish tizimi. Flexbox "kontent oqimini" boshqarsa, Grid "tuzilmaning o'zini" — butun sahifa skeletini — chizadi.

O'xshatish: Flexbox — bir tokchaga kitoblarni terish (bir qator). Grid — butun javon: ustunlar va tokchalar (qator × ustun) bir vaqtda. Siz "bu kitob 2-tokchaning 3-ustuniga" deb aniq joylaysiz.

Nega Grid'ni bilish kerak?

• Butun sahifa layout'i (header/sidebar/main/footer) — Grid'ning eng kuchli tomoni.
• Galereya, dashboard, narx jadvallari — Grid bilan eng oson.
• position (relative/absolute/fixed/sticky) — modal, tooltip, yopishqoq header uchun zarur — shu bobda ko'ramiz.
• Flexbox + Grid birga — zamonaviy frontend layout'ning to'liq to'plami.

2. Nazariya — chuqur tushuntirish

2.1. Grid asosi: konteyner, qator, ustun, katak

Grid ham (Flexbox kabi) ikki darajali:

• Grid konteyner — display: grid berilgan ota.
• Grid elementlar — bevosita bolalar.

Asosiy atamalar:

        ustun 1   ustun 2   ustun 3
       ┌────────┬────────┬────────┐
qator1 │ katak  │ katak  │ katak  │
       ├────────┼────────┼────────┤    grid line (chiziq)
qator2 │ katak  │ katak  │ katak  │
       └────────┴────────┴────────┘
         │
         track (yo'lak — bitta qator yoki ustun)

• Track (yo'lak) — bitta qator yoki bitta ustun.
• Cell (katak) — qator va ustun kesishmasi.
• Grid line (chiziq) — track'lar orasidagi chiziq (1, 2, 3... raqamlangan).
• Area (maydon) — bir nechta katakni qamrab olgan to'rtburchak.

2.2. Ustun va qatorlarni belgilash: grid-template-columns/rows

Grid'ni "chizish" — necha ustun/qator va ularning o'lchami:

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 ustun, har biri 200px */
  grid-template-rows: 100px 100px;           /* 2 qator, har biri 100px */
}

2.3. fr birligi — egiluvchan ulush

fr (fraction — ulush) — Grid'ning maxsus birligi: mavjud bo'sh joyni ulushlarga bo'ladi. pxdan ustun, chunki moslashuvchan:

grid-template-columns: 1fr 1fr 1fr;   /* 3 teng ustun (har biri 1/3) */
grid-template-columns: 2fr 1fr;       /* birinchi ustun 2x keng */
grid-template-columns: 250px 1fr;     /* sidebar 250px, main qolganini oladi */

  1fr 1fr 1fr   [   1/3   ][   1/3   ][   1/3   ]
  2fr 1fr       [      2/3      ][   1/3   ]
  250px 1fr     [ 250px ][      qolgani (1fr)       ]

2.4. repeat(), minmax() va auto-fit — kuchli kombinatsiya

repeat() — takrorlanuvchi track'larni qisqa yozadi:

grid-template-columns: repeat(3, 1fr);        /* = 1fr 1fr 1fr */
grid-template-columns: repeat(4, 200px);      /* 4 ta 200px ustun */

minmax(min, max) — track'ning eng kichik va eng katta o'lchamini beradi:

grid-template-columns: repeat(3, minmax(200px, 1fr));
/* har ustun kamida 200px, lekin bo'sh joy bo'lsa 1fr gacha kengayadi */

auto-fit / auto-fill — eng sehrli: ekranga necha ustun sig'sa, shuncha avtomatik yasaydi (responsive, media query'siz!):

.galereya {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
/* Keng ekran  4 ustun; o'rta  2; telefon  1. AVTOMATIK. */

Bu — eng ko'p ishlatiladigan, eng foydali Grid retsepti. Yodlab qo'ying.

auto-fit va auto-fill farqi — ikkalasi ham "necha track sig'sa" hisoblaydi, lekin element kam bo'lganda boshqacha:

• auto-fill — qatorni bo'sh track'lar bilan ham to'ldiradi. Element sig'gan joydan kam bo'lsa, qolgan ustunlar bo'sh (ko'rinmas) turadi.
• auto-fit — bo'sh track'larni yig'ib tashlaydi (0px'gacha "qisadi"), shuning uchun mavjud elementlar bo'sh joyni o'zaro bo'lib, kengayadi.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* kam element  bo'sh ustunlar qoladi */
grid-template-columns: repeat(auto-fit,  minmax(200px, 1fr));  /* kam element  mavjudlari cho'ziladi */

Amalda ko'pincha auto-fit kerak bo'ladi (galereya to'liq enni egallasin). Bo'sh "uyalar" qolishi kerak bo'lsa — auto-fill.

2.5. gap — kataklar orasidagi masofa

Flexbox'dagidek 1.3-bob, gap track'lar orasidagi bo'shliqni beradi:

.grid {
  display: grid;
  gap: 1rem;              /* qator va ustun orasi (1rem) */
  row-gap: 2rem;          /* faqat qatorlar orasi */
  column-gap: 1rem;       /* faqat ustunlar orasi */
}

2.6. Elementni joylashtirish: grid-column / grid-row

Element bir nechta katakni qamrab olishi mumkin — chiziq (line) raqamlari bilan:

.katta-element {
  grid-column: 1 / 3;    /* 1-chiziqdan 3-chiziqgacha = 2 ustun egallaydi */
  grid-row: 1 / 2;       /* 1-qator */
}
.to'liq-en {
  grid-column: 1 / -1;   /* -1 = oxirgi chiziq  butun enni egallaydi */
}
.span-bilan {
  grid-column: span 2;   /* "span 2" — 2 ustun joy ol (qayerdan boshlansa) */
}

2.7. grid-template-areas — eng o'qishli usul

Layout'ni nom bilan, vizual chizib belgilash — eng tushunarli usul:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;       /* sidebar | main */
  grid-template-rows: auto 1fr auto;      /* header | content | footer */
  grid-template-areas:
    "header  header"      /* yuqori qator: header butun enda */
    "sidebar main"        /* o'rta: sidebar chapda, main o'ngda */
    "footer  footer";     /* past: footer butun enda */
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

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

Bu — butun sahifa skeletini yozishning eng aniq va o'qishli usuli.

2.8. position — elementni "oqimdan chiqarish"

Sukut bo'yicha elementlar normal oqimda (bir-biri ortidan) joylashadi. position buni o'zgartiradi:

  relative + absolute juftligi — eng ko'p uchraydigan naqsh:
  .ota { position: relative; }        "langar" (markaz)
  .belgi { position: absolute; top: 0; right: 0; }   otaning o'ng yuqorisiga

top / right / bottom / left — positsiyalangan elementni mos chetdan suradi (offset). inset — bularning to'rttasini bitta qatorga qisqartiradi:

.belgi { position: absolute; inset: 0; }            /* top/right/bottom/left = 0  otani to'liq qoplaydi */
.belgi { position: absolute; inset: 10px 20px; }    /* yuqori/past 10px, o'ng/chap 20px */
/* teng: top:0; right:0; bottom:0; left:0; */

z-index — qatlamlar tartibi (qaysi element ustda). Faqat position static bo'lmaganda ishlaydi. (0.5: composite/qatlam.)

Stacking context (qatlam konteksti). z-index raqamlari har doim ham global emas: element yangi stacking context yaratsa, uning ichidagi z-index'lar faqat shu kontekst ichida taqqoslanadi. Yangi kontekst hosil qiluvchi keng tarqalgan sabablar: position (static emas) + z-index qiymati; opacity 1'dan kichik; transform, filter, will-change. Shu sababli ba'zan "z-index: 9999 qo'ydim, baribir ostida qoladi" holati yuzaga keladi — element boshqa stacking context ichida bo'ladi, ya'ni tashqaridagi raqam bilan to'qnashmaydi.

O'xshatish: relative — devorda o'z o'rnidan bir oz surilgan rasm. absolute — devorga ilingan, lekin "xona" (relative ota) ichida erkin joylangan rasm. fixed — derazaga yopishtirilgan stiker (siz xona bo'ylab yursangiz ham, u joyida). sticky — pastga tushib ketmaydigan, yuqorida "ilinib" qoladigan yorliq.

2.9. width, max-width, container va markazlash

Layout'ning amaliy tomoni — kenglik boshqaruvi:

• width: 100% — otaning butun enini oladi.
• max-width: 1200px — lekin 1200px'dan oshmasin (katta ekranda matn juda cho'zilib ketmasin).
• min-width — eng kichik chegara.
• Container naqshi (markazlash):

.container {
  width: 100%;
  max-width: 1200px;   /* o'qishli kenglik chegara */
  margin: 0 auto;      /* markazga 1.2-bob */
  padding: 0 1rem;     /* chetda biroz bo'shliq (mobilda) */
}

2.10. Explicit va implicit grid: grid-auto-rows/columns/flow

grid-template-columns/rows bilan aniq (explicit) belgilangan to'rdan tashqariga chiqib element joylashsa (masalan 3 ustun belgilab, 7-element kelsa), brauzer avtomatik yangi qator/ustun yaratadi — bu implicit (yashirin) grid. Uning o'lchamini siz boshqarasiz:

• grid-auto-rows — avtomatik yaratilgan qatorlar balandligi.
• grid-auto-columns — avtomatik yaratilgan ustunlar kengligi.
• grid-auto-flow — elementlar bo'sh kataklarga qaysi yo'nalishda joylanishi: row (sukut — qator bo'ylab), column (ustun bo'ylab), dense (bo'sh "teshik"larni keyingi elementlar bilan to'ldiradi).

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* explicit: 3 ustun */
  grid-auto-rows: 120px;                  /* implicit qatorlar — har biri 120px */
  grid-auto-flow: row dense;              /* bo'shliqlarni zich to'ldir */
}

Tushuncha: grid-template-* — siz oldindan chizgan to'r (explicit); grid-auto-* — element sig'mag'anda brauzer o'zi qo'shgan track'lar (implicit). Ko'p ma'lumotli grid (galereya, ro'yxat)da grid-auto-rows juda foydali — har bir avtomatik qator bir xil balandlikda chiqadi.

2.11. Kataklar ichida tekislash: justify/align (items, content, self)

Grid'da tekislashning ikki bo'g'ini bor — element katak ichida qayerda turishi va butun to'r konteyner ichida qayerda turishi. Ikkala o'q uchun alohida xossa bor (gorizontal = justify-*, vertikal = align-*):

1) Konteynerga beriladi — barcha elementlarga ta'sir qiladi:

• justify-items — har bir elementni o'z katagi ichida gorizontal tekislaydi: start | end | center | stretch (sukut).
• align-items — har bir elementni katagi ichida vertikal tekislaydi: start | end | center | stretch (sukut).
• place-items — yuqoridagi ikkisining qisqartmasi: place-items: center; = align-items: center; justify-items: center;.

2) Konteynerga beriladi — to'rni bo'sh joyga nisbatan joylaydi (track'larning umumiy o'lchami konteynerdan kichik bo'lsa):

• justify-content — butun to'rni gorizontal: start | end | center | space-between | space-around | space-evenly.
• align-content — butun to'rni vertikal: yuqoridagi qiymatlar.
• place-content — ikkisining qisqartmasi.

3) Bitta elementga beriladi — faqat o'sha elementni (konteyner sozlamasini bekor qiladi):

• justify-self — bitta elementni katagi ichida gorizontal.
• align-self — bitta elementni katagi ichida vertikal.
• place-self — ikkisining qisqartmasi.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;   /* har element katagida gorizontal markazda */
  align-items: center;     /* va vertikal markazda */
  /* qisqasi: place-items: center; */
}
.maxsus {
  justify-self: end;       /* faqat shu element o'ng chetga */
  align-self: start;       /* va yuqoriga */
}

Eslatma (Flexbox bilan bog'liq, 1.3): justify-content/align-items nomlari Flexbox'dan tanish. Grid'da farq shuki, Grid'da ikkala o'q ham boshqariladi (justify-* = gorizontal/qator o'qi, align-* = vertikal/ustun o'qi), Flexbox'da esa o'qlar flex-direction'ga bog'liq edi.

2.12. Qisqartmalar va nomli chiziqlar: grid-template, named lines

grid-template — grid-template-rows, grid-template-columns va grid-template-areasni bitta e'londa birlashtiradi. O'qilishi murakkab, shuning uchun ko'pincha alohida yozish afzal, lekin tanib olish kerak:

.layout {
  display: grid;
  grid-template:
    "header  header" 60px      /* qator nomi + balandligi */
    "sidebar main"   1fr
    "footer  footer" 60px
    / 200px 1fr;               /* "/" dan keyin — ustunlar (grid-template-columns) */
}

Nomli chiziqlar (named grid lines). Chiziqlarga raqam o'rniga nom berib, grid-column/grid-row'da o'sha nom bilan ishlash mumkin — o'qishni osonlashtiradi:

.grid {
  display: grid;
  grid-template-columns: [chap] 250px [kontent-boshi] 1fr [o'ng];
}
.main {
  grid-column: kontent-boshi / o'ng;   /* raqam emas, nom bilan */
}

Maslahat: kichik loyihada raqamli chiziqlar (1 / 3) yetarli; katta, murakkab layout'da nomli chiziqlar yoki grid-template-areas xatoga kamroq olib keladi.

3. Sintaksis — tez ma'lumotnoma

/* KONTEYNER */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* sehrli 2.4-bob */
  grid-template-rows: auto 1fr auto;
  grid-auto-rows: 120px;                    /* implicit qatorlar 2.10-bob */
  grid-auto-flow: row dense;                /* joylanish yo'nalishi 2.10-bob */
  gap: 1rem;                                /* row-gap / column-gap 2.5-bob */
  grid-template-areas: "h h" "s m" "f f";   /* nomli layout 2.7-bob */
  justify-items: center; align-items: center;   /* katak ichida tekislash 2.11-bob */
  justify-content: center; align-content: center; /* to'rni joylash 2.11-bob */
}

/* ELEMENT */
.item {
  grid-column: 1 / 3;     /* yoki: span 2 2.6-bob */
  grid-row: 1 / 2;
  grid-area: header;      /* nomli 2.7-bob */
  justify-self: end; align-self: start;   /* bitta elementni tekislash 2.11-bob */
}

/* POSITION */
.belgi { position: absolute; inset: 0; z-index: 10; }   /* inset = top/right/bottom/left 2.8-bob */

4. Batafsil kod namunalari

Misol 1 — Responsive galereya (media query'siz!)

.galereya {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2.4 */
  gap: 1rem;
}
/* Ekran kengligiga qarab ustunlar soni AVTOMATIK o'zgaradi — sehr shu yerda */

Misol 2 — To'liq sahifa layout (areas bilan)

.sahifa {
  display: grid;
  grid-template-columns: 250px 1fr;       /* sidebar | main (2.3: fr) */
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}
.header  { grid-area: header;  background: #3b5bdb; }
.sidebar { grid-area: sidebar; background: #f0f0f0; }
.main    { grid-area: main;    padding: 2rem; }
.footer  { grid-area: footer;  background: #222; color: #fff; }

Misol 3 — Element bir nechta katakni egallaydi

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.katta-grafik {
  grid-column: 1 / 3;    /* 2 ustun keng 2.6-bob */
  grid-row: 1 / 3;       /* 2 qator baland */
}
.to'liq-banner {
  grid-column: 1 / -1;   /* butun en 2.6-bob */
}

Misol 4 — position bilan "Yangi" belgisi va sticky header

/* Kartadagi "Yangi" yorlig'i — o'ng yuqori burchakda 2.8-bob */
.karta { position: relative; }              /* langar */
.karta .yorliq {
  position: absolute;                       /* oqimdan chiqadi */
  top: 8px; right: 8px;                      /* karta ichida o'ng yuqorida */
  background: red; color: white; padding: 2px 8px; border-radius: 4px;
}

/* Yuqorida "yopishib" qoladigan header 2.8-bob */
.header {
  position: sticky;
  top: 0;                                    /* yuqoriga yetganda yopishadi */
  z-index: 100;                              /* boshqalar ustida (0.5: qatlam) */
  background: white;
}

5. To'g'ri va noto'g'ri holatlar

1) Butun sahifa layout uchun Flexbox bilan ovora bo'lish

/*  murakkab 2D layout'ni faqat Flexbox bilan — ko'p ichki div, azob */
/*  Grid — areas bilan toza va aniq 2.7-bob */

2) position: absolute ni relative otasiz ishlatish

/*  relative ota yo'q — element BUTUN SAHIFAga nisbatan joylashadi 2.8-bob */
.belgi { position: absolute; top: 0; }

/*  otaga relative ber — element ota ICHIDA joylashadi */
.ota { position: relative; }
.belgi { position: absolute; top: 0; }

3) Qat'iy width (responsive emas)

/*  telefonda gorizontal skroll chiqadi */
.container { width: 1200px; }

/*  moslashuvchan 2.9-bob */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }

4) fr o'rniga hamma joyda px

/*  moslashmaydi */
grid-template-columns: 400px 400px 400px;

/*  fr — bo'sh joyni egiluvchan bo'lib oladi 2.3-bob */
grid-template-columns: repeat(3, 1fr);

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Grid elementlar joyiga tushmayapti

Sababi: grid-template-areasdagi nom bilan grid-area mos emas, yoki areas "to'rtburchak emas". Yechimi: DevTools 0.5-bob Grid overlay'ni yoqing chiziqlar va area nomlarini ko'ring; areas har qatorda bir xil ustun soniga ega bo'lsin.

Xato 2 — position: absolute element kutilmagan joyda

Sababi: eng yaqin position: relative/absolute/fixed ota yo'q — element <body>ga nisbatan joylashdi 2.8-bob. Yechimi: kerakli otaga position: relative bering.

Xato 3 — sticky ishlamayapti

Sababi: (a) top/bottom berilmagan; (b) ota elementda overflow: hidden; (c) ota balandlikni cheklagan. Yechimi: top: 0 bering; ota overflowini tekshiring.

Xato 4 — z-index ishlamayapti

Sababi: element position: static (sukut) — z-index faqat positsiyalangan elementda ishlaydi 2.8-bob. Yechimi: position: relative (yoki boshqa) bering.

Xato 5 — Telefonda gorizontal skroll

Sababi: qat'iy width, yoki box-sizing reset yo'q 1.2-bob. Yechimi: max-width + width:100%; * { box-sizing: border-box }.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Flexbox 1.3-bob: Grid — 2D (umumiy skelet); Flexbox — 1D (komponent ichi). Ikkalasini birga ishlating.
• Responsive 1.5-bob: auto-fit + minmax 2.4-bob — media query'siz responsive; positions va container.
• CSS asoslari 1.2-bob: box model, birliklar (fr yangi), container markazlash.
• Tailwind 1.7-bob: grid, grid-cols-3, gap-4, col-span-2 — aynan shu Grid utility'si.
• Dashboard/layout loyiha 11.15-bob: real admin panel — Grid skeleti.
• Animatsiya/modal 11.12-bob: position: fixed + z-index (0.5: qatlam).

8. Eng yaxshi amaliyotlar (best practices)

• 2D layout (qator+ustun) — Grid; 1D (kontent oqimi) — Flexbox. Ikkalasini birga ishlating.
• repeat(auto-fit, minmax(250px, 1fr)) — responsive galereyaning oltin retsepti 2.4-bob.
• Sahifa skeleti uchun grid-template-areas — eng o'qishli 2.7-bob.
• fr ishlating, qat'iy px o'rniga (egiluvchanlik — 2.3).
• position: absolute ishlatsangiz, otaga position: relative bering 2.8-bob.
• Container naqshi: width:100%; max-width:1200px; margin:0 auto; padding:0 1rem 2.9-bob.
• DevTools Grid inspektorini ishlating — chiziq raqamlari va area'larni ko'rsatadi.
• sticky header uchun position:sticky; top:0; z-index:....

9. Amaliy loyiha: "Admin Dashboard Layout"

Grid'ning kuchini to'liq ishlatadigan loyiha — real dashboard skeleti.

Maqsad

Grid areas, fr, auto-fit, position va container naqshini birlashtirib, professional, responsive dashboard layout qurish.

Talablar (requirements)

1. Asosiy layout (areas bilan): header (yuqorida, butun en), sidebar (chapda), main (o'ngda), footer (pastda) — grid-template-areas bilan (2.7, Misol 2). min-height: 100vh.
2. Sticky header: position: sticky; top: 0; z-index — skrollda yuqorida qolsin 2.8-bob.
3. Statistika kartalari (main ichida): repeat(auto-fit, minmax(220px, 1fr)) — ekranga qarab 1–4 ustun (2.4, Misol 1).
4. Katta grafik: bitta element 2 ustun + 2 qator egallasin (grid-column/grid-row yoki span — 2.6, Misol 3).
5. Karta "yorlig'i": kamida bitta kartaga position: absolute bilan "Yangi"/"+12%" belgisi (2.8, Misol 4).
6. Container: main kontenti max-width bilan cheklangan 2.9-bob.
7. (Bonus) sidebarni telefon kengligida tepaga/pastga ko'chir (media query — 1.5'ga ko'prik).

Maslahatlar (hint)

• DevTools Grid overlay'ni yoqing area nomlarini va chiziqlarni ko'ring.
• grid-template-areasda har qator bir xil ustun soniga ega bo'lsin (aks holda buziladi).
• auto-fit + minmax — kartalar uchun; brauzerni kichraytirib sinang.
• Sticky uchun top: 0 shart; ota overflow: hidden bo'lmasin.
• "Yorliq" uchun kartaga position: relative, yorliqga position: absolute.

"Tayyor" mezonlari (acceptance criteria)

• Layout grid-template-areas bilan (header/sidebar/main/footer) qurilgan.
• Header skrollda yuqorida yopishib qoladi (sticky).
• Statistika kartalari ekranga qarab ustun sonini o'zgartiradi (auto-fit).
• Kamida bitta element bir nechta katakni egallaydi (span).
• Kamida bitta kartada absolute yorliq bor.
• Telefon kengligida gorizontal skroll yo'q.
• fr birligi ishlatilgan.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda zamonaviy layout'ning ikkinchi yarmini — CSS Grid va positionni o'rgandik:

• Grid — ikki o'lchamli (qator × ustun) layout; konteyner (display:grid) + elementlar.
• grid-template-columns/rows + fr (egiluvchan ulush) + repeat()/minmax()/auto-fit — moslashuvchan to'r (media query'siz responsive).
• grid-template-areas — nomli, o'qishli sahifa skeleti; grid-column/row — element bir nechta katakni egallaydi.
• position (relative/absolute/fixed/sticky) + z-index — oqimdan chiqarish, yopishish, qatlamlash.
• Container naqshi (max-width + margin:auto) — kenglik boshqaruvi.

Keyingi bob — 1.5-bob: Responsive dizayn va media queries. Endi layout'ni quramiz; navbat — uni har xil ekranga (telefon, planshet, kompyuter) moslash. Media queries, mobile-first yondashuv va shu bobda ko'rgan fr/auto-fit/%/vw birliklari birlashib, sayt hamma qurilmada chiroyli ko'rinadi.

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — CSS grid layout, grid-template-columns, fr unit, repeat(), minmax(), auto-fit/auto-fill
• MDN Web Docs — grid-template-areas, grid-template, grid-area, named grid lines
• MDN Web Docs — grid-auto-rows/grid-auto-columns/grid-auto-flow (implicit grid)
• MDN Web Docs — justify-items/align-items/place-items, justify-content/align-content, justify-self/align-self
• MDN Web Docs — CSS position (relative/absolute/fixed/sticky), inset, z-index, stacking context