CSS Grid'da elementlarni joylashtirish: chiziqlar, span, nomli chiziqlar va implicit grid

Qisqacha: Grid element sukut bo'yicha navbatdagi bo'sh katakka tushadi, lekin uni aniq joyga ham qo'yish mumkin: grid-column: 1 / 3 — "1-chiziqdan 3-chiziqqacha", ya'ni ikki ustun. grid-column: 1 / -1 — butun en, span 2 — "ikki katak egalla". Oldindan chizilmagan joyga tushgan elementlar uchun brauzer o'zi track qo'shadi (implicit grid), uning o'lchamini grid-auto-rows beradi.

Bu darsda

• Elementni chiziq raqamlari bilan aniq joyga qo'yasiz va bir necha katakka cho'zasiz.
• -1 va span ni ishlatasiz va ularning tuzoqlarini bilasiz.
• Chiziqlarga nom berib, raqamsiz joylashtirasiz.
• Oldindan chizilgan (explicit) va brauzer qo'shgan (implicit) track'larni farqlaysiz, grid-auto-rows bilan boshqarasiz.
• grid-auto-flow bilan to'ldirish yo'nalishini va zichligini o'zgartirasiz, elementlarni ustma-ust qo'yasiz.

Oldin bilishingiz kerak: Grid'ga kirish (chiziqlar, katak), repeat() va minmax(), z-index.

1. Nega bu kerak?

Hozirgacha to'rga elementlar navbat bilan tushardi: birinchisi — birinchi katakka, ikkinchisi — ikkinchisiga. Bu Grid'ga kirish darsidagi avtomatik joylashtirish. Ko'p hollarda shu yetadi.

Lekin Jasur aka menyu sahifasi uchun yangi istak aytdi. Tepada — butun en bo'ylab aksiya lentasi. Kun taomi — osh — boshqalardan kattaroq, ikki ustun va ikki qator egallasin. Qolgan taomlar esa bo'sh joylarga o'zi tushsin. Bu yerda endi "navbat bilan" yetmaydi: ba'zi elementlarga aniq manzil kerak.

Choyxonaga qayting. Oddiy mehmonlarni Otabek bo'sh stollarga navbat bilan o'tqazadi. To'y uchun esa Jasur aka oldindan aytadi: "kelin-kuyov stoli — to'rdagi, uchta stolni birlashtiring". Otabek avval shu "band qilingan" stollarni joyiga qo'yadi, keyin qolgan mehmonlarni bo'sh joylarga o'tqazadi. Grid ham aynan shunday ishlaydi: avval manzili aniq elementlar, keyin qolganlari.

2. Chiziq raqami bilan joylashtirish

2.1 Boshlanish va tugash chizig'i

Grid'ga kirish darsida chiziqlarni sanagan edik: uch ustunli to'rda to'rtta ustun chizig'i bor, 1 dan 4 gacha. Elementni joylashtirish — unga "qaysi chiziqdan qaysi chiziqqacha" deyish.

To'rtta to'liq yozuv bor:

• grid-column-start va grid-column-end — ustun bo'yicha boshlanish va tugash chizig'i;
• grid-row-start va grid-row-end — qator bo'yicha.

Amalda ko'pincha ularning qisqa yozuvi ishlatiladi — grid-column va grid-row. Ikki raqam / bilan ajratiladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .aksiya {
    grid-column: 1 / 4;
    margin: 0;
    padding: 0.5rem 1rem;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .mashhur {
    grid-column: 1 / 3;
    background-color: #d8ecd9;
  }
</style>
<section>
  <p class="aksiya">Aksiya: har juma osh −10%</p>
  <article class="taom-karta mashhur">
    <h3 class="taom-nomi">Osh — kun taomi</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Ko'k choy</h3>
  </article>
</section>

Nimaga qarang: aksiya lentasi 1-chiziqdan 4-chiziqqacha — uchala ustunni egalladi. Osh kartasi 1-chiziqdan 3-chiziqqacha — ikki ustun. Lag'mon esa hech qanday manzilsiz, ikkinchi qatorda qolgan yagona bo'sh katakka o'zi tushdi. Manti va ko'k choy — uchinchi qatorga.

Eng ko'p uchraydigan xato — chiziq va track'ni adashtirish. grid-column: 1 / 3 "birinchi va uchinchi ustun" emas, "birinchi va ikkinchi ustun": 3 — tugash chizig'i, u ikkinchi ustunning o'ng chegarasi. Choyxona zalidagi yo'laklarni eslang: "1-yo'lakdan 3-yo'lakkacha" — bu ikki qator stol.

2.2 Bitta raqam

Tugash chizig'ini yozmasangiz, element bitta katak egallaydi. grid-column: 2 — "2-chiziqdan boshla", ya'ni ikkinchi ustunda. Qator bo'yicha ham xuddi shunday: grid-row: 3 — uchinchi qatorda.

Ustun va qatorni birga bersangiz, element aniq bitta katakka tushadi: grid-column: 3; grid-row: 1 — birinchi qatorning oxirgi katagi. Qolgan elementlar bu band katakni aylanib o'tadi.

Tekshirib ko'ring: To'rt ustunli to'rda grid-column: 2 / 5 bo'lgan element nechta ustun egallaydi? Qaysilarini?

3. Manfiy raqamlar: 1 / -1

3.1 Oxiridan sanash

Chiziqlarni oxiridan ham sanash mumkin: -1 — oxirgi chiziq, -2 — undan oldingisi. Uch ustunli to'rda -1 va 4 — bir xil chiziq.

Buning eng foydali qo'llanishi — grid-column: 1 / -1: "birinchi chiziqdan oxirgisigacha", ya'ni butun en. Ustunlar soni qancha bo'lishidan qat'i nazar. Yuqoridagi aksiya lentasiga 1 / 4 o'rniga 1 / -1 yozsangiz, ertaga to'r to'rt ustunli bo'lganda ham lenta butun enni egallaydi. 1 / 4 esa uchta ustunda qolib ketadi.

Bu ayniqsa auto-fit bilan muhim. U yerda ustunlar soni ekran eniga qarab o'zgaradi — telefonda bitta, kompyuterda oltita. 1 / -1 ikkalasida ham to'g'ri ishlaydi: repeat(auto-fit, ...) yaratgan ustunlar oldindan chizilgan hisoblanadi.

3.2 Tuzoq: -1 faqat oldindan chizilgan to'rni biladi

-1 — oldindan chizilgan to'rning oxirgi chizig'i. Qatorlarni odatda chizmaymiz — ularni brauzer mazmunga qarab o'zi qo'shadi (pastda, «Implicit grid» bo'limida). Shuning uchun grid-row: 1 / -1 ko'pincha kutilganini qilmaydi.

Chrome'da tekshirdik: uch ustunli, grid-template-rows siz to'rda beshta element bor. Ikkinchisiga grid-row: 1 / -1 berdik.

U ikki qatorni emas, faqat birinchi qatorni egalladi. Oldindan chizilgan qator yo'q — demak, -1 ham 1-chiziqning o'zi. Brauzer "1-chiziqdan 1-chiziqqacha" ni bitta qator deb tushundi.

Qiziq tafsilot: shu element birinchi katakka ko'chib o'tdi, HTML'dagi birinchi element esa ikkinchi katakka surildi. Qatori aniq berilgan elementlar avval joylashadi — xuddi to'y stollari kabi.

Qatorlarni grid-template-rows: 50px 50px bilan chizib bersak, o'sha element ikkala qatorni egalladi. Qoida: -1 bilan ishlasangiz, o'sha yo'nalishdagi track'lar oldindan chizilganiga ishonch hosil qiling.

3.3 Tuzoq: grid-column: -1

Oxirgi ustunga qo'ymoqchisiz va grid-column: -1 yozdingiz. Element to'rdan tashqariga tushadi.

-1 — oxirgi chiziq, undan boshlangan katak esa to'rdan keyin keladi. Chrome'da tekshirdik: brauzer to'rning o'ng chetida qo'shimcha tor ustun qo'shdi va elementni o'sha yerga qo'ydi. Oxirgi ustun uchun to'g'risi — grid-column: -2 / -1 yoki grid-column: -2.

4. span — "shuncha katak egalla"

4.1 Boshlanishsiz cho'zish

Ba'zan elementning qayerdan boshlanishi muhim emas, faqat hajmi muhim. span kalit so'zi aynan shuni aytadi: grid-column: span 2 — "ikki ustun egalla, qayerdan — navbatingga qarab".

Jasur akaning kun taomi — ikki ustun va ikki qator:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .mashhur {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(135deg, #d8ecd9, #fde2c4);
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<section>
  <article class="taom-karta mashhur">
    <h3 class="taom-nomi">Osh — kun taomi</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">Somsa</h3>
    <p class="narx">8 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: osh kartasi to'rtta katakni — ikki ustun va ikki qatorni — egalladi. Lag'mon va manti uning o'ng tomonidagi ustunga ketma-ket tushdi. Somsa va ko'k choy esa uchinchi qatorga o'tdi. Biz hech bir chiziq raqamini yozmadik.

span ni chiziq bilan birga ham yozish mumkin: grid-column: 2 / span 2 — "2-chiziqdan boshlab, ikki ustun". Bu 2 / 4 bilan bir xil. Ba'zan shunisi o'qishga qulay: boshlanish va hajm alohida ko'rinadi.

4.2 Tuzoq: span teshik qoldiradi

span li element joriy qatorga sig'masa, brauzer uni keyingi qatorga o'tkazadi. Tashlab ketilgan katak esa bo'sh qoladi. Buni pastda, «dense — teshiklarni to'ldirish» bo'limida natijada ko'rasiz — yechimi bilan.

Tekshirib ko'ring: grid-column: span 3 li element to'rt ustunli to'rda qatorning 3-ustunidan boshlanishi kerak edi. Nima bo'ladi?

5. Nomli chiziqlar

5.1 Raqam o'rniga nom

grid-column: 2 / 4 — to'g'ri, lekin o'qiyotgan odam "2 nima edi?" deb so'raydi. Chiziqlarga nom berish mumkin. Nom grid-template-columns ichida, kvadrat qavsda, chiziq turgan joyga yoziladi:

section {
  grid-template-columns:
    [toliq-start] 1rem
    [kontent-start] 1fr
    [kontent-end] 1rem
    [toliq-end];
}

O'qilishi: "chetdan 1rem, o'rtada — mazmun, yana 1rem chet". To'rtta chiziq, har biri o'z nomi bilan. Endi elementni nom bilan joylashtiramiz: grid-column: kontent-start / kontent-end.

Nomlar -start va -end bilan tugagani bejiz emas. Shunday nomlangan chiziq juftligi grid'da maxsus ma'no oladi: grid-column: kontent — "kontent-start dan kontent-end gacha" ning qisqa yozuvi. Qo'shimchalar CSS qoidasining bir qismi. Shuning uchun ular inglizcha, nomning o'zi esa o'zbekcha bo'lishi mumkin.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  body {
    margin: 0;
  }
  section {
    display: grid;
    grid-template-columns:
      [toliq-start] 1rem
      [kontent-start] 1fr
      [kontent-end] 1rem
      [toliq-end];
    row-gap: 1rem;
  }
  section > * {
    grid-column: kontent;
    margin: 0;
  }
  .aksiya {
    grid-column: toliq;
    padding: 0.5rem 1rem;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
</style>
<section>
  <h2>Bugungi menyu</h2>
  <p>Rustam aka oshni har kuni ertalab o'tin olovida damlaydi.</p>
  <p class="aksiya">Aksiya: har juma osh −10%</p>
  <p>Lag'mon qo'lda cho'zilgan xamirdan tayyorlanadi.</p>
</section>

Nimaga qarang: matnlar ikki chetdan 1rem uzoqda, aksiya lentasi esa ekranning chetidan chetigacha. HTML'da ular qo'shni — lenta boshqa ota ichida emas. Faqat bitta qoida farq qiladi: grid-column: toliq.

Bu naqshni full-bleed ("chetgacha to'kilgan") deyishadi. Uning to'liq, keng ekranga mos variantini Layout naqshlari darsida quramiz.

5.2 Nomlar qachon kerak

Kichik to'rda raqamlar yetadi. Nom kerak bo'ladigan holatlar:

• To'r o'zgaradi. Ertaga chap chetga yana bitta ustun qo'shilsa, raqamlar siljiydi, nomlar esa joyida qoladi.
• Bitta qoida ko'p sahifada ishlatiladi. grid-column: kontent ni o'qigan odam ma'nosini darhol tushunadi.

Hududlarga nom berib, sahifani "rasm" qilib chizishning yanada o'qishli usulini keyingi darsda ko'ramiz — u ham chiziqlarga avtomatik nom beradi.

6. Implicit grid: brauzer qo'shgan track'lar

6.1 Explicit va implicit

repeat() darsida faqat ustunlarni chizdik. Qatorlar esa elementlar soniga qarab o'zi paydo bo'lardi. Endi buning nomini aytamiz:

• Explicit grid ("oshkora to'r") — grid-template-columns va grid-template-rows bilan siz chizgan track'lar.
• Implicit grid ("yashirin to'r") — element oldindan chizilgan to'rga sig'magani uchun brauzer o'zi qo'shgan track'lar.

Uch ustun chizib, yettita element qo'ysangiz, brauzer kerakli qatorlarni o'zi qo'shadi — ular implicit. Element to'rdan tashqaridagi chiziqqa qo'yilsa ham shunday bo'ladi. Chrome'da tekshirdik: uch ustunli to'rda grid-column: 5 bergan element uchun brauzer ikkita qo'shimcha ustun qo'shdi. 4-ustun bo'sh qolib, 0 piksel bo'ldi, 5-ustun esa mazmunicha.

«Tuzoq: -1 faqat oldindan chizilgan to'rni biladi» bo'limidagi holat ham shundan: -1 faqat explicit to'rni sanaydi.

6.2 grid-auto-rows va grid-auto-columns

Implicit track'lar sukut bo'yicha auto — mazmunicha. Ularning o'lchamini ikki xususiyat boshqaradi:

• grid-auto-rows — brauzer qo'shadigan har qatorning balandligi;
• grid-auto-columns — brauzer qo'shadigan har ustunning eni.

Eng foydali qiymat — repeat() va minmax() darsida va'da qilingan minmax(8rem, auto): "har qator kamida 8rem, mazmun ko'p bo'lsa — cho'ziladi":

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(6rem, auto);
    gap: 1rem;
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<section>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Chuchvara</h3>
    <p>Qo'lda tugilgan mayda chuchvara, qatiq va ko'katlar
    bilan. Qishda — sho'rva bilan ham beriladi.</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Somsa</h3>
  </article>
</section>

Nimaga qarang: birinchi qatordagi kartalar roppa-rosa 6rem baland — mazmuni kam bo'lsa ham. Ikkinchi qatorda chuchvara tavsifi uzun: qator cho'zildi va yonidagi somsa kartasi ham u bilan birga baland bo'ldi. Hech qanday height yo'q, hech narsa toshmaydi.

Tekshirib ko'ring: To'rda grid-template-rows: 10rem va grid-auto-rows: 4rem yozilgan, ustun bitta, elementlar uchta. Qatorlar qanday balandlikda?

7. grid-auto-flow — to'ldirish tartibi

7.1 row va column

Avtomatik joylashtirish sukut bo'yicha qator bo'ylab yuradi: chapdan o'ngga, qator to'lsa — keyingisiga. Buni grid-auto-flow: row belgilaydi. Qiymatni column ga o'zgartirsangiz, elementlar tepadan pastga, ustun bo'ylab tiziladi. Ustun to'lganda — keyingi ustun.

Buning uchun qatorlar soni ma'lum bo'lishi kerak. Chrome'da tekshirdik: grid-template-rows: repeat(2, auto) va grid-auto-flow: column bilan beshta element 1-2, 3-4, 5 bo'lib uch ustunga tushdi. Ustunlarni brauzer o'zi qo'shdi — ularning enini endi grid-auto-columns boshqaradi. Bu, masalan, qisqa ro'yxatni gazetadagidek ustunlarga bo'lishda kerak bo'ladi.

7.2 dense — teshiklarni to'ldirish

span tuzog'idagi va'dani bajaramiz. span 2 li element qator oxiriga sig'masa, teshik qoladi. dense ("zich") kalit so'zi brauzerga orqaga qaytib, teshikni keyingi mos element bilan to'ldirishni aytadi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  section:last-of-type {
    grid-auto-flow: row dense;
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
  .keng {
    grid-column: span 2;
    border-color: var(--rang-urgu);
  }
</style>
<h3>❌ Oddiy: teshik qoldi</h3>
<section>
  <p>1. Osh</p><p>2. Lag'mon</p><p class="keng">3. Manti</p>
  <p>4. Somsa</p><p>5. Ko'k choy</p>
</section>
<h3>✅ dense: teshik to'ldi</h3>
<section>
  <p>1. Osh</p><p>2. Lag'mon</p><p class="keng">3. Manti</p>
  <p>4. Somsa</p><p>5. Ko'k choy</p>
</section>

Nimaga qarang: tepadagi to'rda birinchi qatorning o'ng katagi bo'sh — ikki ustunli "3. Manti" unga sig'madi va keyingi qatorga o'tdi. Pastdagi to'rda o'sha bo'sh katakka "4. Somsa" qaytib o'tirdi. Endi ekranda tartib 1, 2, 4, keyin 3 va 5.

7.3 dense ning narxi: tartib buziladi

Oxirgi gapga yana bir bor qarang: ekranda somsa manti'dan oldin turibdi, HTML'da esa keyin. Ko'z tartibi va HTML tartibi endi farq qiladi.

Klaviatura va fokus darsidan eslang: Tab tugmasi HTML tartibida yuradi, ekran o'quvchi ham HTML tartibida o'qiydi. Kartalar ichida havolalar bo'lsa, Bobur Tab bosganda fokus to'r bo'ylab sakraydi: 1, 2, 3 (pastda), 4 (tepaga qaytib), 5. Malika esa taomlarni ekrandagidan boshqa tartibda eshitadi.

Qoida: dense — faqat tartibi ahamiyatsiz, bosiladigan narsasi yo'q yoki kam kontentda. Masalan, suratlar galereyasi. Menyu, maqolalar ro'yxati, forma — tartib muhim joylarda ishlatmang. Vizual tartib va accessibility haqida order va a11y darsida batafsil gaplashganmiz — grid'da ham o'sha qoida.

8. Ustma-ust tushish

8.1 Bir katakka ikki element

Grid ikki elementni bitta katakka qo'yishga ruxsat beradi — ular ustma-ust tushadi. Buning uchun ikkalasiga bir xil manzil bering:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .banner {
    display: grid;
    max-width: 24rem;
  }
  .banner > * {
    grid-column: 1;
    grid-row: 1;
  }
  .banner div {
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--rang-asosiy), #b4461a);
  }
  .banner h2 {
    align-self: end;
    margin: 0;
    padding: 1rem;
    color: var(--rang-fon);
  }
</style>
<section class="banner">
  <div></div>
  <h2>Choyxona «Bahor»</h2>
</section>

Nimaga qarang: sarlavha rangli fonning ustida, pastki chapda turibdi. Ikkalasi ham birinchi ustun va birinchi qatorda. Katakning o'lchamini kattarog'i — fon — belgiladi.

align-self: end sarlavhani katakning pastiga tushirdi. Bu — tekislash xususiyati. Hozir faqat shu bitta qatorni biling, qolganini Grid'da tekislash darsida o'rganamiz.

banner — faqat shu misol uchun nom, «Bahor» fayllariga ko'chirmang. Bu naqshning — "rasm ustida matn" — to'liq varianti haqiqiy rasm bilan Layout naqshlari darsida.

8.2 Kim ustida?

Ustma-ust tushgan elementlardan HTML'da keyingisi ustida chiziladi. Yuqoridagi misolda h2 div dan keyin — shuning uchun ustida.

Tartibni z-index o'zgartiradi. Grid elementida u position siz ham ishlaydi. Chrome'da tekshirdik: ikki p bitta katakda, birinchisiga z-index: 1 berdik — u ikkinchisining ustiga chiqdi, position yozilmagan edi. Oddiy blokda bunday bo'lmasdi: u yerda z-index faqat position bilan ishlaydi (z-index).

Ustma-ust qo'yishning bitta xavfi bor — matn o'qilmay qolishi. Rasm ustidagi matnning kontrasti (Ranglar 3) hamma joyda yetarli bo'lsin.

9. Ko'p uchraydigan xatolar

9.1 Chiziq va ustunni adashtirish

grid-column: 1 / 2 — bitta ustun, ikkita emas. Tuzatish: tugash chizig'i = oxirgi ustun raqami + 1. Yoki span yozing: 1 / span 2.

9.2 grid-row: 1 / -1 ishlamadi

Qatorlar chizilmagan, -1 — 1-chiziq. Tuzatish: grid-template-rows bilan qatorlarni chizing yoki span ishlating.

9.3 grid-column: -1 element to'rdan chiqdi

-1 — oxirgi chiziq, undan keyin katak yo'q. Tuzatish: oxirgi ustun — -2 / -1.

9.4 span dan keyin teshik

Tuzatish: tartib muhim bo'lmasa — grid-auto-flow: dense. Muhim bo'lsa — HTML'dagi tartibni o'zgartiring yoki span ni kichraytiring.

9.5 Implicit qatorlar notekis

Kartalar har xil balandlikda, to'r "sakraydi". Tuzatish: grid-auto-rows: minmax(8rem, auto) — hamma qator kamida bir xil.

10. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Qaysi kataklar?

To'r to'rt ustunli. Har element qaysi ustunlarni egallaydi?

1. grid-column: 2 / 4 —
2. grid-column: 1 / -1 —
3. grid-column: 3 / span 2 —
4. grid-column: -3 / -1 —

Javobni "boshlanish-oxirgi" ko'rinishida yozing, masalan 1-2.

Ishora: to'rt ustunda beshta chiziq bor, -1 — 5-chiziq, -3 — 3-chiziq.

2-mashq (o'rta): Menyu sahifasining boshi

«Bahor» menyu sahifasi uch ustunli to'rda:

• sarlavha h1 — butun en;
• aksiya lentasi (.aksiya) — butun en, sarlavhadan keyin;
• osh (.taom-karta.mashhur) — ikki ustun, ikki qator;
• qolgan to'rtta taom kartasi — bo'sh joylarga navbat bilan;
• hamma qator kamida 5rem, ustunlar soni ertaga o'zgarsa ham sarlavha va lenta butun enda qolsin.

Ishora: "ustunlar soni o'zgarsa ham" — raqam emas, -1. Qatorlar minimumi — grid-auto-rows.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(5rem, auto);
    gap: 1rem;
  }
  h1,
  .aksiya {
    grid-column: 1 / -1;
    margin: 0;
  }
  .aksiya {
    padding: 0.5rem 1rem;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .mashhur {
    grid-column: span 2;
    grid-row: span 2;
  }
</style>
<main>
  <h1>Menyu</h1>
  <p class="aksiya">Aksiya: har juma osh −10%</p>
  <article class="taom-karta mashhur">
    <h3 class="taom-nomi">Osh — kun taomi</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Somsa</h3>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Ko'k choy</h3>
  </article>
</main>

3-mashq (qiyin): Galereya va tartib

«Bahor» zali suratlari galereyasi: 8 ta surat, to'r repeat(auto-fill, minmax(8rem, 1fr)), qatorlar 8rem. 2-surat — keng (span 2 ustun), 5-surat — baland (span 2 qator).

1. Galereyani quring. Keng ekranda teshiklar qoldimi?
2. Teshiklarni yo'qoting.
3. Keyin Jasur aka har suratni bosiladigan havola qilmoqchi — kattaroq ko'rish uchun. Siz 2-bandda qilgan ishingizni saqlab qolasizmi? Nega?

Ishora: suratlar o'rniga gradientli div — Gradientlar. Keng va baland suratlarni tanlash — :nth-child() (Tuzilma pseudo-klasslari). 3-band — «dense ning narxi».

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns:
      repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
    grid-auto-rows: 8rem;
    grid-auto-flow: dense;
    gap: 0.5rem;
  }
  div {
    border-radius: 0.5rem;
    background: linear-gradient(
      135deg, var(--rang-asosiy), var(--rang-urgu)
    );
  }
  div:nth-child(2) {
    grid-column: span 2;
  }
  div:nth-child(5) {
    grid-row: span 2;
  }
</style>
<section>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
</section>

4-mashq: Portfolio qadami — aloqa formasi to'ri

Portfolioning aloqa formasi hozir hamma maydonni bir-birining ostiga teradi. Keng ekranda "Ismingiz" va "Email" yonma-yon tursin, qolgani — butun en.

1. form ni to'r qiling: maydonlar kamida 14rem, sig'ganicha ustun, tor ekranda toshmasin, orasida 1rem.
2. Formaning bevosita bolalari bo'lgan p larning margin'ini olib tashlang. Nega bu grid'da kerak?
3. fieldset (radio tugmalari) va textarea li paragraf — butun en. Ustunlar soni ekranga qarab o'zgarishini unutmang.
4. Tugma butun enga cho'zilmasin: unga justify-self: start bering. Bu — grid elementini o'z katagi ichida chapga tekislash. Uni Grid'da tekislash darsida to'liq o'rganamiz.
5. 360 va 1280 piksel enida tekshiring.

Ishora: portfolio formasida har maydon p ichida — p lar grid elementi bo'ladi, label va input emas. textarea li paragrafni :has() bilan tanlang (Mantiqiy pseudo-klasslar).

/* Aloqa formasi: keng ekranda ikki ustun */
form {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1rem;
}

form > p {
  margin: 0;
}

form > p:has(textarea),
form > fieldset {
  grid-column: 1 / -1;
}

form > button {
  justify-self: start;
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-chegara: #c9d6cf;
    --rang-ikkinchi: #5b6660;
  }
  *,
  *::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;
  }
  input,
  textarea,
  button {
    font: inherit;
  }
  input:not([type="radio"]),
  textarea {
    width: 100%;
    padding: 0.5em;
  }
  p > label:first-child,
  span[id$="-yordam"] {
    display: block;
  }
  span[id$="-yordam"] {
    font-size: 0.875rem;
    color: var(--rang-ikkinchi);
  }
  fieldset {
    border: 1px solid var(--rang-chegara);
    border-radius: 0.5rem;
  }
  textarea {
    min-height: 8rem;
  }
  button {
    min-height: 2.75rem;
    padding-inline: 1.5em;
  }
  form {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 1rem;
  }
  form > p {
    margin: 0;
  }
  form > p:has(textarea),
  form > fieldset {
    grid-column: 1 / -1;
  }
  form > button {
    justify-self: start;
  }
</style>
<main id="asosiy">
  <h2>Xabar yuborish</h2>
  <form action="https://example.com/aloqa" method="post">
    <p>
      <label for="ism">Ismingiz</label>
      <input id="ism" name="ism" type="text"
             autocomplete="name" required maxlength="60">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email"
             autocomplete="email" required
             aria-describedby="email-yordam">
      <span id="email-yordam">Javobni shu manzilga yozaman.</span>
    </p>
    <fieldset>
      <legend>Qaysi mavzuda?</legend>
      <p>
        <input id="mavzu-ish" name="mavzu" type="radio"
               value="ish" required>
        <label for="mavzu-ish">Ish taklifi</label>
      </p>
      <p>
        <input id="mavzu-savol" name="mavzu" type="radio"
               value="savol">
        <label for="mavzu-savol">Savol</label>
      </p>
    </fieldset>
    <p>
      <label for="xabar">Xabar</label>
      <textarea id="xabar" name="xabar" rows="5"
                required maxlength="1000"></textarea>
    </p>
    <button type="submit">Yuborish</button>
  </form>
</main>

11. Real ishda

• Dashboardlar va admin panellar — "vidjet" kartalari to'rda turli o'lchamda: biri ikki ustun, biri ikki qator. Hammasi span bilan.
• Yangiliklar saytlari bosh sahifasida bosh maqola katta (span 2), qolganlari kichik. Tailwind CSS'dagi col-span-2, col-start-2, row-span-2 klasslari aynan grid-column: span 2 kabi qiymatlarni yozadi.
• Pinterest uslubidagi galereyalar dense bilan teshiklarni yopadi — lekin faqat tartib ahamiyatsiz bo'lganda. Haqiqiy "masonry" joylashuvi haqida Layout naqshlari darsida.
• Intervyuda so'raladi: "Elementni butun enga qanday cho'zasiz?" (1 / -1), "Explicit va implicit grid farqi?", "dense nima qiladi va uning xavfi nimada?".

Xulosa

• grid-column: 1 / 3 — chiziqdan chiziqqacha; tugash chizig'i ustun raqamidan bitta katta.
• 1 / -1 — butun en; -1 faqat explicit to'rni sanaydi, grid-column: -1 esa to'rdan chiqadi.
• span 2 — boshlanishsiz hajm; qator oxiriga sig'masa, teshik qoldiradi.
• Chiziq nomlari [kontent-start] raqamlarni o'qishli qiladi; -start/-end juftligi grid-column: kontent qisqa yozuvini beradi.
• Brauzer qo'shgan track'lar — implicit; o'lchami grid-auto-rows va grid-auto-columns bilan.
• grid-auto-flow: dense teshiklarni to'ldiradi, lekin ko'z va Tab tartibini ajratib yuboradi; bir katakdagi elementlar ustma-ust tushadi, keyingisi ustida.

Keyingi dars: grid-template-areas — hududlarga nom berib, sahifa tuzilishini CSS'da "rasm" qilib chizish.

Manbalar

• MDN: "Grid layout using line-based placement", "Grid layout using named grid lines", "Auto-placement in grid layout", "grid-auto-flow", "grid-auto-rows" — developer.mozilla.org
• W3C: "CSS Grid Layout Module Level 2", 8. Placing Grid Items va 8.5 Grid Item Placement Algorithm — w3.org/TR/css-grid-2
• W3C: "Understanding SC 1.3.2: Meaningful Sequence" va "2.4.3: Focus Order" — w3.org/WAI/WCAG22/Understanding