CSS Grid'ga kirish: qator, ustun va fr birligi

Qisqacha: CSS Grid — elementlarni bir vaqtda ham qatorga, ham ustunga teradigan ikki o'lchamli layout. Otaga display: grid va grid-template-columns: 1fr 1fr 1fr yozilsa — uchta teng ustun chiqadi. fr birligi gap va qat'iy ustunlardan keyin qolgan joyni bo'ladi, shuning uchun foizdan farqli, otadan chiqib ketmaydi.

Bu darsda

• display: grid va grid-template-columns bilan ustunli to'r quring.
• Grid atamalarini — track, chiziq, katak, hudud — nomi bilan ayta olasiz va chiziqlarni sanaysiz.
• fr bo'sh joyni qanday bo'lishini hisoblaysiz va nega u foizdan yaxshiroq ekanini tushuntirasiz.
• auto ustun va gap ni ishlatasiz, bir qatordagi kartalar nega bir xil balandlikda ekanini bilasiz.
• DevTools'da grid overlay'ni yoqib, to'rni ko'z bilan tekshirasiz.

Oldin bilishingiz kerak: Flexbox'ga kirish, Margin sirlari, display, O'lchamlar.

1. Nega bu kerak?

«Bahor» bosh sahifasida "Nega aynan biz?" bo'limi bor. Semantik skelet darsida uni oddiy ul qilgan edik va "maketda ular uchta chiroyli kartochka bo'lishi mumkin, kartochka ko'rinishini keyin CSS beradi" degandik. Mana o'sha kartochkalar:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0;
    list-style: none;
  }
  li {
    padding: 1rem;
    border: 2px solid var(--rang-asosiy);
    border-radius: 0.5rem;
    background-color: var(--rang-fon);
  }
</style>
<h2>Nega aynan biz?</h2>
<ul>
  <li>Osh har kuni ertalab yangi damlanadi.</li>
  <li>Tandir non — bepul, xohlagancha.</li>
  <li>Oilaviy xonalar va bolalar burchagi bor.</li>
</ul>

Nimaga qarang: uchala karta bir xil enda va bir xil balandlikda. Matnlari esa har xil uzunlikda — ikkinchisi eng qisqa. Kartalar orasidagi joy bir xil, chetlarda esa ortiqcha joy yo'q. Bularning hammasini ul dagi uchta qator qildi: display: grid, grid-template-columns va gap.

Flexbox'ga kirish darsida elementlarni bitta o'q bo'ylab terishni o'rgandingiz. Lekin sahifada ko'pincha ikki yo'nalish birdan kerak: oltita taom kartasi uch ustunda, ikki qatorda, har ustun tekis. Oldin buning uchun jadval ishlatishgan.

Jadval asoslari darsida bu nega yomonligini ko'rgan edik va "ustunli joylashuvni Flexbox va Grid bilan quramiz" degandik. Grid — aynan shu vosita: jadvalning tartibi bor, HTML'ning ma'nosi esa buzilmaydi.

Choyxona zalini tasavvur qiling. Jasur aka yangi zalni jihozlashdan oldin qog'ozga reja chizadi: "uch qator, to'rt ustun, orasida bir metrlik yo'lak". Keyin Otabek stollarni rejadagi kataklarga qo'yib chiqadi. Grid ham shunday ishlaydi: avval to'r chiziladi, keyin elementlar kataklarga tushadi. Flex'da esa aksincha — elementlar o'zi tiziladi va joyni o'z o'lchamiga qarab egallaydi.

2. Birinchi to'r

2.1 display: grid — otaga beriladi

Grid konteyner (grid container) — display: grid berilgan element. Uning bevosita bolalari grid elementlar (grid items) bo'ladi. Flex'dagi kabi: qoida otaga yoziladi, ta'sir bolalarga tushadi.

Faqat display: grid yozsangiz, ko'zga deyarli hech narsa o'zgarmaydi. Ustunlar aytilmagan — brauzer bitta ustun chizadi va har bolani alohida qatorga qo'yadi. Lekin ikki narsa o'zgaradi:

• gap ishlay boshlaydi — uni pastda, «gap» bo'limida ko'ramiz.
• Bolalarning margin'lari endi qo'shilmaydi. Margin sirlari darsida buni oldindan aytgan edik. Chrome'da tekshirdik: 16 piksellik margin'li uchta paragraf oddiy blokda bir-biridan 16 piksel uzoqda, grid ichida esa 32 piksel.

2.2 grid-template-columns — ustunlarni chizish

grid-template-columns — to'rdagi ustunlar soni va har birining eni. Qiymatlar bo'sh joy bilan ajratiladi — nechta qiymat bo'lsa, shuncha ustun:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: 10rem 10rem 10rem;
    gap: 1rem;
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<section>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p class="narx">35 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
    <p class="narx">28 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
    <p class="narx">30 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Ko'k choy</h3>
    <p class="narx">5 000 so'm</p>
  </article>
</section>

Nimaga qarang: uchta ustun, har biri 10rem — 160 piksel. To'rtinchi karta — "Ko'k choy" — o'z-o'zidan ikkinchi qatorning birinchi katagiga tushdi. Biz qatorlar haqida hech narsa yozmadik: brauzer elementlarni chapdan o'ngga, tepadan pastga terdi va joy tugaganda yangi qator ochdi. Buni avtomatik joylashtirish (auto-placement) deyishadi.

Bu to'rning bitta kamchiligi bor: ustunlar qat'iy. Telefonda 3 × 160 + 2 × 16 = 512 piksel sig'maydi va to'r ekrandan chiqib ketadi. "Tahrirlab ko'rish" bilan ustunlarni 12rem ga o'zgartirib ko'ring — to'r kengayadi, lekin ota enini hisobga olmaydi. Yechim — pastdagi fr birligi.

2.3 Faqat bevosita bolalar

Grid element — faqat konteynerning bolasi, nevarasi emas. Yuqoridagi misolda to'rga article lar tushdi. Ularning ichidagi h3 va p oddiy blok bo'lib qoldi: ular kartaning ichida, to'rda emas.

Ko'p uchraydigan xato: display: grid ni main ga yozib, uning ichidagi section dagi kartalar ustunga tizilishini kutish. Kartalar main ning nevarasi — ularga ta'sir yo'q. To'r kerak bo'lgan elementlarning to'g'ridan-to'g'ri otasini grid qiling.

Yana bir nozik joy: konteyner ichidagi tegsiz, "yalang'och" matn ham grid element bo'ladi. Chrome'da tekshirdik: <div>Matn <b>qalin</b> yana</div> grid bo'lsa, uchta element chiqadi — "Matn", b va "yana". Brauzer tegsiz matnni ko'rinmas "anonim" qutiga o'raydi va unga alohida katak beradi. Shuning uchun grid ichida matnni doim biror tegga o'rang.

Tekshirib ko'ring: <ul> ga display: grid; grid-template-columns: 1fr 1fr; berildi. ul da uchta li bor, har li ichida bittadan a. Nechta grid element bor?

3. Grid atamalari: track, chiziq, katak, hudud

To'r haqida gapirish uchun to'rtta so'z kerak. Ular keyingi darslarda doim uchraydi — shuning uchun bir marta rasm bilan ko'rib olamiz. Choyxona zalini eslang: bir qator (yoki bir ustun) stollar — track, ularni ajratib turgan yo'lak — chiziq, bitta stol joyi — katak. Ikki qatorli, uch ustunli to'r:

    1        2        3        4    ← ustun chiziqlari
  1 ┌────────┬────────┬────────┐
    │ katak  │ katak  │ katak  │    ← 1-qator (track)
  2 ├────────┼────────┼────────┤
    │ katak  │ katak  │ katak  │    ← 2-qator (track)
  3 └────────┴────────┴────────┘
    ↑
    qator chiziqlari

• Track (yo'lak) — bitta ustun yoki bitta qator. "Ustun" va "qator" — track'ning ikki turi. Rasmda 3 ta ustun track'i va 2 ta qator track'i bor.
• Chiziq (grid line) — track'larni ajratib turadigan chegara, chetdagilari ham. Chiziqlar 1 dan boshlab raqamlanadi. Uch ustun uchun to'rtta chiziq kerak — to'siqlar har doim bo'laklardan bitta ko'p.
• Katak (grid cell) — qator va ustun kesishgan eng kichik bo'lak. Rasmda 6 ta katak.
• Hudud (grid area) — bir yoki bir nechta katakdan iborat to'rtburchak. Masalan, birinchi qatorning uchala katagi birga — bitta hudud.

Chiziq raqamlari elementni aniq joyga qo'yish uchun kerak: "2-chiziqdan 4-chiziqqacha". Buni Elementlarni joylashtirish darsida qilamiz. Hududlarga nom berib, sahifani "rasm" qilib chizishni esa grid-template-areas darsida o'rganamiz.

3.1 Qatorlarni ham chizish mumkin

Xuddi ustunlar kabi qatorlarni ham oldindan chizish mumkin — grid-template-rows bilan:

.taom-karta {
  display: grid;
  grid-template-rows: 8rem auto;
}

Bu kartada ikki qator: birinchisi 8rem (masalan, rasm uchun), ikkinchisi auto — mazmunicha (uni pastda, «auto ustun» bo'limida ko'ramiz). Amalda qatorlar kamdan-kam chiziladi: odatda ustunlarni berasiz, qatorlarni esa brauzer mazmunga qarab o'zi qo'shadi. Bu ikki xil qatorning farqini Elementlarni joylashtirish darsida ochamiz.

3.2 DevTools'da to'rni ko'rish

To'r ko'zga ko'rinmaydi — kataklar orasidagi chiziqlarni brauzer chizmaydi. Shuning uchun DevTools'da CSS darsida tanishgan grid overlay'ni yoqamiz:

1. Elements panelida display: grid li element yonida kichik grid belgisi turadi. Uni bosing.
2. Sahifada to'r chiziladi: chiziqlar, kataklar va chiziq raqamlari.
3. Layout yorlig'ida sozlamalar bor: "Show line numbers" — chiziq raqamlari, "Show track sizes" — har track'ning eni, "Extend grid lines" — chiziqlarni sahifa chetigacha cho'zish.

To'r "noto'g'ri" ishlasa, birinchi qadam — doim overlay. Ko'pincha javob darhol ko'rinadi: yoki element kutgan katagida emas, yoki display: grid boshqa elementda turibdi.

Tekshirib ko'ring: To'rda 4 ta ustun va 3 ta qator bor. Nechta ustun chizig'i, nechta qator chizig'i va nechta katak bor?

4. fr — bo'sh joy ulushi

4.1 Foiz bilan teng ustunlar — tuzoq

Uchta teng ustun kerak. Birinchi fikr — foiz: har biri 33.33%. Orasiga gap qo'shamiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    gap: 1rem;
    width: 32rem;
    margin-bottom: 1rem;
    outline: 2px dashed var(--rang-urgu);
  }
  section:first-of-type {
    grid-template-columns: 33.33% 33.33% 33.33%;
  }
  section:last-of-type {
    grid-template-columns: 1fr 1fr 1fr;
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<section>
  <p>❌ 33.33%</p><p>33.33%</p><p>33.33%</p>
</section>
<section>
  <p>✅ 1fr</p><p>1fr</p><p>1fr</p>
</section>

Nimaga qarang: qizg'ish punktir — konteynerning chegarasi. Tepadagi to'r undan o'ngga chiqib ketdi, pastdagisi roppa-rosa sig'di.

Nega? Chrome'da o'lchadik: konteyner 512 piksel. Foizli ustunlar 170.64 pikseldan — uchalasi birga 512 ning o'zi. Ustiga ikkita 16 piksellik gap qo'shildi, jami 544. Foiz gap ni bilmaydi: u faqat otaning enidan hisoblanadi.

4.2 fr qanday hisoblanadi

fr (fraction — ulush) — grid'ning maxsus birligi. U otaning butun enini emas, bo'sh joyini bo'ladi. Brauzer uni uch qadamda hisoblaydi:

1. Konteynerning enidan hamma gap larni ayiradi.
2. Qat'iy ustunlarni (px, rem, %) ayiradi.
3. Qolganini fr lar yig'indisiga bo'ladi va har ustunga o'z ulushini beradi.

Pastdagi to'rni shu qadamlar bilan hisoblaymiz:

flowchart TD
  A["Konteyner: 512 px"] --> B["− 2 ta gap: 2 × 16 = 32 px"]
  B --> C["Bo'sh joy: 480 px"]
  C --> D["fr lar yig'indisi: 1 + 1 + 1 = 3"]
  D --> E["1fr = 480 ÷ 3 = 160 px"]

Chrome'da o'lchadik — har ustun aynan 160 piksel.

Oshni uch kishiga bo'layotganingizni tasavvur qiling. "Bittaga ikki hissa, qolganlarga bir hissadan" desangiz — 2fr 1fr 1fr: jami to'rt hissa, biriga ikkitasi.

4.3 Qat'iy va egiluvchan ustun birga

fr ning kuchi — uni boshqa birliklar bilan aralashtirish mumkin. Qat'iy ustun o'z enini oladi, fr esa qolganini:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    display: grid;
    gap: 1rem;
    width: 32rem;
    margin-bottom: 1rem;
  }
  p {
    margin: 0;
    padding: 0.5rem;
    background-color: #d8ecd9;
    border-left: 4px solid var(--rang-asosiy);
  }
  section:nth-of-type(1) {
    grid-template-columns: 200px 1fr;
  }
  section:nth-of-type(2) {
    grid-template-columns: 2fr 1fr;
  }
  section:nth-of-type(3) {
    grid-template-columns: 1fr 2fr 1fr;
  }
</style>
<section><p>200px</p><p>1fr — qolgani</p></section>
<section><p>2fr</p><p>1fr</p></section>
<section><p>1fr</p><p>2fr</p><p>1fr</p></section>

Nimaga qarang: birinchi qatorda chap ustun qat'iy, o'ngdagisi qolgan joyni to'liq oldi. Ikkinchisida chap ustun o'ngdagidan roppa-rosa ikki barobar keng. Uchinchisida o'rtadagi ustun chetdagilardan ikki barobar keng. Chrome'da o'lchadik, konteyner 512 piksel:

Birinchi qator — sahifalarda eng ko'p uchraydigan naqsh: yon ustun qat'iy, asosiy mazmun qolgan hamma joyni oladi. Ekran kengaysa, faqat 1fr ustun o'sadi.

"Tahrirlab ko'rish" bilan section larning width ini 24rem ga tushiring va jadvaldagi hisobni o'zingiz qayta qiling: qat'iy 200 piksel joyida qoladi, fr lar esa kichrayadi.

4.4 fr qayerda ishlamaydi

fr — faqat grid track'lari uchun birlik. width: 1fr yoki padding: 1fr yozsangiz, brauzer deklaratsiyani tashlab ketadi (CSS nima darsidagi "jim tashlab ketish").

Yana bir nozik joy bor. 1fr mazmundan tor bo'lolmaydi: ustunga juda uzun so'z yoki havola tushsa, u o'z ulushidan kengayib ketadi. Bu tuzoqni va uning yechimini keyingi darsda ko'ramiz.

Tekshirib ko'ring: Konteyner 600 piksel, gap: 20px, grid-template-columns: 110px 1fr 2fr. O'rtadagi ustun [:150] piksel, oxirgisi [:300] piksel.

5. auto ustun — mazmunicha

5.1 Nomi va qiymati bir qatorda

Ba'zan ustun eni oldindan ma'lum emas — u mazmunga bog'liq. «Bahor»ning aloqa ma'lumotlari: chapda nom ("Ish vaqti", "Manzil"), o'ngda qiymat. Chap ustun eng uzun nomcha bo'lsin, o'ng ustun qolgan hammasini olsin. Bu — auto track:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-ikkinchi: #5b6660;
  }
  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
  }
  dt {
    color: var(--rang-ikkinchi);
  }
  dd {
    margin: 0;
    color: var(--rang-asosiy);
    font-weight: bold;
  }
</style>
<dl>
  <dt>Ish vaqti</dt>
  <dd>Har kuni 7:00 dan 23:00 gacha</dd>
  <dt>Manzil</dt>
  <dd>Chilonzor, Toshkent</dd>
  <dt>Telefon</dt>
  <dd>+998 90 000 00 00</dd>
</dl>

Nimaga qarang: hamma qiymatlar bitta vertikal chiziqdan boshlanadi — jadvaldagidek tekis. Chap ustun eng uzun nom — "Ish vaqti" — enicha, ortiq emas. dt va dd ga joylashuv qoidasini yozmadik. Avtomatik joylashtirish ularni navbat bilan chap va o'ng katakka qo'ydi. Ro'yxatlar darsidagi dl endi o'zining tabiiy ko'rinishini oldi.

dd ning brauzer bergan chap margin'ini (40 piksel) olib tashladik — endi uning joyini ustun beradi.

5.2 Label va maydon yonma-yon

Xuddi shu naqsh formada ham ishlaydi. Label darsida "label va maydon sahifaning istalgan joyida turishi mumkin — keyinroq CSS bilan ularni xohlagan joyga qo'yish oson" degan edik:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1rem;
    max-width: 24rem;
  }
  input {
    font: inherit;
    padding: 0.25em 0.5em;
    border: 1px solid var(--rang-asosiy);
  }
</style>
<form action="https://example.com/bron" method="post">
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" type="text" autocomplete="name">
  <label for="telefon">Telefon</label>
  <input id="telefon" name="telefon" type="tel"
         autocomplete="tel">
</form>

Nimaga qarang: ikkala maydon bitta chiziqdan boshlanadi va qolgan enni to'ldiradi. Maydonga width bermadik — grid elementi o'z katagini o'zi to'ldiradi.

«Bahor»ning haqiqiy bron formasida esa har label va maydon juftligi div ichida turibdi (Accessible forma). U yerda label'lar formaning nevarasi — to'rga tushmaydi. Ichki elementlarni ota to'rga tekislash uchun maxsus vosita bor — subgrid.

5.3 auto va fr birga bo'lmasa

To'rda fr ustun bo'lmasa, auto ustunlar ortib qolgan joyni o'zaro bo'lib, konteynerni to'ldiradi. Chrome'da tekshirdik: grid-template-columns: auto auto bilan 512 piksellik konteynerda "Osh" va "Lag'mon" katakchalari 232.78 va 263.22 piksel chiqdi — teng emas. Nega? Brauzer ortiqcha joyni teng bo'ldi, lekin boshlang'ich en — mazmun — har xil edi.

Teng ustun kerak bo'lsa — 1fr 1fr, mazmunicha ustun kerak bo'lsa — auto va yonida 1fr.

O'lchamlar darsidagi max-content va min-content ham track o'lchami bo'la oladi. Lekin odatda auto yetadi.

6. gap — track'lar orasidagi joy

6.1 Uch xususiyat

gap — qatorlar va ustunlar orasidagi bo'sh joy. Flex'da gap darsida uni ko'rgan edingiz — grid'da u xuddi shunday, faqat ikki yo'nalishda:

Ikki qiymatli yozuvda tartib: avval qator, keyin ustun. Aloqa ma'lumotlaridagi gap: 0.5rem 1rem shu edi — qatorlar zichroq, ustunlar orasi kengroq.

Eski kodlarda grid-gap, grid-row-gap nomlarini uchratasiz — bu gap ning eski nomi. Brauzerlar uni hali tushunadi (Chrome'da tekshirdik), lekin yangi kodda gap yozing.

6.2 Nega margin emas

gap faqat track'lar orasiga tushadi. To'rning chetlarida joy qolmaydi, qo'shilish ham bo'lmaydi. Margin sirlari darsidagi "oraliqni komponent emas, layout beradi" tamoyili endi bitta qatorga aylandi. Kartalarda birorta ham margin yo'q — oraliqni to'r beradi. * + * naqshi grid ichida kerak emas.

6.3 Bir qatordagi kartalar — bir xil balandlikda

«Nega bu kerak?» bo'limidagi "Nega aynan biz?" kartalariga qayting: matn uzunligi har xil, kartalar esa bir xil balandlikda. Bu tasodif emas:

• grid qatorining balandligi — undagi eng baland katakcha;
• grid elementi sukut bo'yicha o'z katagini to'liq to'ldiradi — ham eniga, ham bo'yiga.

O'lchamlar darsida "kartalarni bir xil bo'yli qilish grid bilan qilinadi, height: 100% bilan emas" degan edik — mana u. Hech qanday height yozilmadi. Bu cho'zilishni o'chirishni Grid'da tekislash darsida ko'ramiz.

Tekshirib ko'ring: Uch ustunli to'rda gap: 2rem 1rem. Ustunlar orasidagi masofa qancha? Birinchi ustunning chap chetida-chi?

7. Grid yoki Flex?

Ikkalasi ham layout vositasi va ko'pincha bitta sahifada birga ishlaydi. Oddiy qoida:

Flex'da o'ralgan (flex-wrap) kartalar har qatorda o'zicha taqsimlanadi: pastki qatordagi kartalar tepadagilarning ustunlariga to'g'ri kelmasligi mumkin. Grid'da ustunlar butun to'r uchun bitta. To'liq qaror qoidasini Layout naqshlari darsida chiqaramiz.

display: inline-grid ham bor: ichkaridan grid, tashqaridan matn qatoridagi element — display darsidagi inline-flex ning jufti. Kamdan-kam kerak bo'ladi.

8. Ko'p uchraydigan xatolar

8.1 display: grid noto'g'ri elementda

To'r nevaralarga ta'sir qilmaydi. Tuzatish: DevTools'da grid belgisi qaysi elementda turganini ko'ring. Kartalarning bevosita otasini grid qiling.

8.2 Teng ustunlar foiz bilan

33.33% + gap — to'r otadan chiqadi. Tuzatish: 1fr 1fr 1fr.

8.3 Qiymatlar orasida vergul

grid-template-columns: 1fr, 1fr; — vergul bu yerda ruxsat etilmagan. Brauzer deklaratsiyani butunlay tashlab ketadi — Chrome'da to'r bitta ustunda qoldi. DevTools'ning Styles bo'limida bu qator ustidan chizilgan holda turadi. Tuzatish: qiymatlar orasida faqat bo'sh joy.

8.4 Kartalarga margin

Grid ichida kartaga margin-bottom berilsa, u gap ga qo'shiladi va oraliq kutilganidan katta chiqadi. Tuzatish: oraliqni faqat gap beradi, kartalardan tashqi margin'ni oling.

8.5 Konteyner ichida yalang'och matn

Matn anonim grid element bo'lib, alohida katak egallaydi. Tuzatish: matnni p yoki span ga o'rang.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Ustunlarni hisoblang

Konteyner 800 piksel, gap: 20px. Har to'rda ustunlar eni qancha?

1. grid-template-columns: 1fr 1fr — har biri
2. grid-template-columns: 1fr 3fr — ikkinchisi
3. grid-template-columns: 240px 1fr — ikkinchisi
4. grid-template-columns: 1fr 1fr 1fr 1fr — har biri

Ishora: «fr qanday hisoblanadi» dagi uch qadam — avval hamma gap larni, keyin qat'iy ustunlarni ayiring.

2-mashq (o'rta): Menyu kartalari

«Bahor» menyu sahifasida to'rtta taom kartasi bor («grid-template-columns» bo'limidagi HTML). Ularni ikki teng ustunga tering: kartalar orasida 1.5rem, qatorlar orasida 1rem joy bo'lsin. Kartalardan brauzer bergan tashqi joyni ham olib tashlang — oraliqni faqat to'r bersin.

Ishora: teng ustunlar — fr. Ikki xil oraliq — ikki qiymatli gap, tartibi: qator, ustun.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<section>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p class="narx">35 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
    <p class="narx">28 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
    <p class="narx">30 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Ko'k choy</h3>
    <p class="narx">5 000 so'm</p>
  </article>
</section>

3-mashq (qiyin): Yon menyu va ichma-ich to'r

«Bahor» menyu sahifasini quring:

• chapda — taom turlari ro'yxati (nav ichida ul: "Birinchi taomlar", "Ikkinchi taomlar", "Ichimliklar"), eni 12rem;
• o'ngda — asosiy qism, u qolgan hamma joyni oladi;
• asosiy qism ichida — taom kartalari uch teng ustunda;
• ikki ustun orasida 2rem, kartalar orasida 1rem.

Keyin savolga javob bering: kartalar to'ri qaysi elementning grid'i va nega tashqi to'rning ustunlari unga ta'sir qilmaydi?

Ishora: ikkita to'r kerak. Grid element o'zi ham grid konteyner bo'la oladi — bu uning ichki ishi.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  body {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 2rem;
  }
  nav ul {
    padding-left: 1rem;
  }
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
  .taom-karta {
    padding: 0 0.75rem;
    border: 2px solid var(--rang-asosiy);
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<nav aria-label="Taom turlari">
  <ul>
    <li><a href="#birinchi">Birinchi taomlar</a></li>
    <li><a href="#ikkinchi">Ikkinchi taomlar</a></li>
    <li><a href="#ichimlik">Ichimliklar</a></li>
  </ul>
</nav>
<main>
  <h1>Menyu</h1>
  <section>
    <article class="taom-karta">
      <h3 class="taom-nomi">Osh</h3>
      <p class="narx">35 000 so'm</p>
    </article>
    <article class="taom-karta">
      <h3 class="taom-nomi">Lag'mon</h3>
      <p class="narx">28 000 so'm</p>
    </article>
    <article class="taom-karta">
      <h3 class="taom-nomi">Manti</h3>
      <p class="narx">30 000 so'm</p>
    </article>
  </section>
</main>

4-mashq: Portfolio qadami — loyihalar to'ri

Portfoliongizning loyihalar sahifasida kartalar hozir bir-birining ostida turibdi. Ularni ikki ustunli to'rga teramiz. Buning uchun kartalarni bitta ota ichiga olish kerak: hozir ularning otasi — main, u yerda esa h1 va kirish paragrafi ham bor.

1. loyihalar/index.html da ikkala article ni yangi <div class="loyihalar"> bilan o'rang. article, section yoki div darsidagi savolni eslang: "faqat CSS uchun kerak bo'lgan sarlavhasiz guruh" — div.
2. .loyihalar — ikki teng ustunli to'r, orasida 1.5rem.
3. Kartalar endi h1 ning qo'shnisi emas — h1 ~ article selektori ularni topmaydi. asosiy.css dagi hamma h1 ~ article ni yangi selektorga almashtiring. Karta oralig'ini beradigan eski qoidani o'chiring — endi bu ishni gap qiladi.
4. DevTools'da .loyihalar ning grid overlay'ini yoqing. Keyin 360 piksellik telefon enida sahifani oching: kartalar qanday ko'rinadi? Ustunlar rostdan tengmi — "Show track sizes" bilan tekshiring.

Ishora: yangi selektor — ".loyihalar ning bolasi bo'lgan article" (Asosiy selektorlar dagi >). Birinchi karta uchun :first-of-type o'rniga endi :first-child ham yetadi — div da faqat kartalar bor.

<main id="asosiy">
  <h1>Loyihalar</h1>
  <p>HTML qismida qilgan ishlarim: har birida qisqa tavsif,
  sana va havolalar.</p>

  <div class="loyihalar">
    <article>
      <h2>Choyxona «Bahor» sayti</h2>
      <!-- ... avvalgidek ... -->
    </article>

    <article>
      <h2>Semantik blog maqolasi</h2>
      <!-- ... avvalgidek ... -->
    </article>
  </div>
</main>

/* Loyihalar to'ri */
.loyihalar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.loyihalar > article,
details[name="savollar"],
fieldset {
  border: 1px solid var(--karta-chegara, var(--rang-chegara));
  border-radius: 0.5rem;
}

.loyihalar > article {
  padding: 0.25em 1em;
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--rang-matn) 8%, transparent),
    0 4px 12px color-mix(in oklch, var(--rang-matn) 10%, transparent);
}

.loyihalar > article:first-child {
  background-color: var(--rang-fon-och);
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-chegara: #c9d6cf;
    --rang-fon-och: #e8f1ec;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  :where(h1, h2) {
    color: var(--rang-asosiy);
  }
  .loyihalar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .loyihalar > article {
    padding: 0.25em 1em;
    border: 1px solid var(--rang-chegara);
    border-radius: 0.5rem;
    box-shadow:
      0 1px 2px
        color-mix(in oklch, var(--rang-matn) 8%, transparent),
      0 4px 12px
        color-mix(in oklch, var(--rang-matn) 10%, transparent);
  }
  .loyihalar > article:first-child {
    background-color: var(--rang-fon-och);
  }
</style>
<main id="asosiy">
  <h1>Loyihalar</h1>
  <p>HTML qismida qilgan ishlarim: har birida qisqa tavsif,
  sana va havolalar.</p>
  <div class="loyihalar">
    <article>
      <h2>Choyxona «Bahor» sayti</h2>
      <p><time datetime="2026-09">2026-yil sentabr</time></p>
      <p>To'rt sahifali sayt: menyu jadvali, stol band qilish
      formasi va 404 sahifasi. Validatordan xatosiz o'tgan.</p>
      <ul>
        <li><a href="bahor/">Loyiha haqida batafsil</a></li>
        <li>
          <a href="https://example.com/bahor/">Saytni ochish</a>
        </li>
      </ul>
    </article>
    <article>
      <h2>Semantik blog maqolasi</h2>
      <p><time datetime="2026-08">2026-yil avgust</time></p>
      <p>"Osh sirlari" maqolasi: landmarklar, sarlavhalar daraxti
      va izohli rasmlar.</p>
      <ul>
        <li><a href="https://example.com/blog/">Saytni ochish</a></li>
      </ul>
    </article>
  </div>
</main>

10. Real ishda

• Deyarli har zamonaviy sayt grid'da quriladi: mahsulot kartalari, galereya, admin panel, sahifa skeleti. Istalgan saytda DevTools'ni ochib, grid belgilarini qidirib ko'ring.
• CSS freymvorklar. Tailwind CSS'dagi grid grid-cols-3 gap-4 klasslari aynan display: grid, uchta ustun va gap ni yozadi. Freymvorklarni kursda keyinroq o'rganasiz, hozir bilish shart emas — ular ortida shu darsdagi xususiyatlar turibdi.
• Figma kabi dizayn dasturlarida "layout grid" bor: dizayner maketni ustunlarga bo'lib chizadi, siz uni grid-template-columns ga ko'chirasiz.
• Intervyuda so'raladi: "Grid va Flex farqi nima?", "fr % dan nimasi bilan farq qiladi?", "Kartalarni bir xil balandlikda qanday qilasiz?". Uchalasiga ham endi javobingiz bor.

Xulosa

• Grid — ikki o'lchamli layout: avval ustunlar va qatorlar chiziladi, keyin bolalar kataklarga tushadi.
• display: grid otaga yoziladi, faqat bevosita bolalar grid element bo'ladi.
• Atamalar: track — ustun yoki qator, chiziq — ular orasidagi chegara (1 dan sanaladi), katak, hudud.
• fr — gap va qat'iy ustunlardan keyin qolgan joyning ulushi; foizdan farqli, otadan chiqmaydi.
• auto — mazmunicha track; auto 1fr — nom va qiymat, label va maydon uchun.
• gap faqat track'lar orasida; grid'da margin'lar qo'shilmaydi, bir qatordagi kataklar bir xil balandlikda.

Keyingi dars: repeat(), minmax() va auto-fill/auto-fit — ustunlar sonini ekran eniga qarab brauzerning o'zi tanlaydigan, media query'siz responsive to'r.

Manbalar

• MDN: "CSS grid layout", "Basic concepts of grid layout", "grid-template-columns", "gap", "The fr unit" — developer.mozilla.org
• W3C: "CSS Grid Layout Module Level 2" — w3.org/TR/css-grid-2
• Chrome for Developers: "Inspect CSS grid layouts" — developer.chrome.com/docs/devtools/css/grid
• web.dev: "Learn CSS — Grid" — web.dev/learn/css/grid