CSS Grid qo'llanma — grid-template, fr, minmax va position (1.4-bob)

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.

2.13. Zamonaviy Subgrid va position: sticky sirlari

1) subgrid — kartalar ichini mukammal tekislash

Klassik Grid muammosi: 3 ta yonma-yon karta bor. Har birida rasm, sarlavha, tavsif va tugma mavjud. Agar bitta kartaning sarlavhasi uzun bo'lib ketsa, uning tugmasi pastga suriladi, qo'shni kartalarning tugmalari esa yuqorida qoladi. Kartalarning pastki qismi bir xil chiziqda tekislanmaydi.

Yechim: subgrid (barcha zamonaviy brauzerlarda qo'llab-quvvatlanadi):

/* Ota to'r — kartalar uchun */
.kartalar-to'ri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Har bir karta — ota qatorlariga ulanadi */
.karta {
  display: grid;
  grid-row: span 4;             /* 4 ta qavat: rasm, sarlavha, matn, tugma */
  grid-template-rows: subgrid;   /* Ota to'rning qator o'lchamlarini meros oladi! */
}

Endi eng uzun sarlavhali karta qanchalik kattalashsa, qo'shni kartalarning ham sarlavha qatori avtomatik kengayadi va barcha tugmalar bir tekis chiziqda joylashadi!

2) position: sticky nega ba'zan ishlamaydi? (Top 3 tuzoq)

position: sticky (navbarni yoki yon panelni qotirib qo'yish) juda qulay, lekin yangi boshlovchilarni ko'p qiynaydi. Ishlamaslik sabablari:

1. Chegara (offset) belgilanmagan: top: 0; (yoki bottom: 0;) yozilmasa, brauzer qaysi nuqtada qotishni bilmaydi.
2. Ota elementda overflow bor: Agar biron-bir ota elementda overflow: hidden, overflow: auto yoki overflow: clip bo'lsa, sticky butun sahifa skrollida ishlamay qoladi.
3. Ota elementning bo'yi qisqa: sticky faqat o'zining ota konteyneri chegarasida qotib turadi. Agar ota element faqat shu sticky bolaning o'zidan iborat bo'lsa, u siljiy olmaydi (surilish uchun ota balandligi katta bo'lishi kerak).

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