CSS grid-template-areas: sahifa layoutini "rasm" qilib chizish

Qisqacha: grid-template-areas sahifa tuzilishini CSS'da so'zlar bilan chizadi: har qo'shtirnoqli satr — bitta qator, har so'z — bitta katak, takrorlangan so'z — bir necha katakli hudud. Elementga grid-area: menyu yozilsa, u menyu hududiga tushadi, nuqta (.) esa bo'sh katak. Telefon va kompyuter uchun HTML'ga tegmasdan faqat shu "rasm"ni qayta chizish kifoya.

Bu darsda

• grid-template-areas bilan sahifa skeletini chizasiz va grid-area bilan elementlarni hududlarga qo'yasiz.
• Hududlar qoidalarini — to'rtburchak, teng kataklar soni, . — bilasiz va buzilganda nima bo'lishini tushuntirasiz.
• Bitta @media ichida "rasm"ni qayta chizib, telefon va kompyuter uchun turli layout qilasiz.
• grid-template qisqa yozuvini o'qiysiz va hududlar yaratadigan chiziq nomlarini ishlatasiz.
• Ko'z tartibi va HTML tartibi farqining accessibility xavfini bilasiz.

Oldin bilishingiz kerak: Elementlarni joylashtirish (chiziqlar va nomli chiziqlar), Grid'ga kirish, repeat() va minmax().

1. Nega bu kerak?

O'tgan darsda elementlarni chiziq raqamlari bilan joylashtirdik. Kichik to'rda bu qulay. Endi «Bahor» menyu sahifasining butun skeletini shu usulda yozilganini tasavvur qiling:

header { grid-column: 1 / 3; grid-row: 1; }
nav    { grid-column: 1;     grid-row: 2; }
main   { grid-column: 2;     grid-row: 2 / 4; }
aside  { grid-column: 1;     grid-row: 3; }
footer { grid-column: 2;     grid-row: 4; }

To'g'ri ishlaydi. Lekin kodga qarab sahifaning ko'rinishini tasavvur qila olasizmi? main qayerda — o'ngdami, chapdami? footer butun en bo'ylabmi? Buni bilish uchun har raqamni boshingizda chizib chiqishingiz kerak.

Endi xuddi shu sahifaning boshqa yozuvi:

body {
  grid-template-areas:
    "bosh  bosh"
    "menyu asosiy"
    "yon   asosiy"
    ".     pastki";
}

Kodning o'zi — sahifaning rasmi. Tepada bosh ikki ustunni egallaydi, chapda menyu va uning ostida yon, o'ngda asosiy ikki qator baland. Pastda pastki faqat o'ng ustunda, chap katak bo'sh.

Jasur aka zalning yangi rejasini qanday chizadi? Qog'ozga katakchalar chizadi va har katakka yozadi: "bu yerda — sahna", "bu yerda — oilaviy xona", "bu ikki katak — to'y stoli". Otabek rejaga bir qarab, hamma narsa qayerda turishini tushunadi. grid-template-areas — xuddi shunday reja, faqat CSS'da.

2. Hududlarni chizish

2.1 grid-template-areas va grid-area

Ikki qadam kerak:

1. Konteynerda — grid-template-areas: qo'shtirnoq ichidagi satrlar. Har satr — bitta qator, satrdagi har so'z — bitta katak. Katakka qo'yilgan so'z — o'sha hududning nomi.
2. Elementda — grid-area: nom: "men shu nomli hududga tushaman".

Grid'ga kirish darsidagi atamani eslang: hudud (grid area) — bir yoki bir nechta katakdan iborat to'rtburchak. Endi uning nomi bor. Bir xil nom qo'shni kataklarda takrorlansa, o'sha kataklar bitta hududga birlashadi.

Nomlarni o'zingiz tanlaysiz — xuddi class nomlari kabi. Biz o'zbekcha nomlarni olamiz: bosh, menyu, asosiy, yon, pastki. Nomlar qo'shtirnoqsiz, bo'sh joysiz yoziladi, raqam bilan boshlanmaydi.

2.2 «Bahor» menyu sahifasi

Grid'ga kirish darsining 3-mashqida taom turlari menyusi va kartalardan iborat sahifa qurgan edik. Endi uni to'liq skelet qilamiz: header, taom turlari nav i, kartalar bilan main, "Kun taomi" yozilgan aside va footer:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  body {
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-template-areas:
      "bosh  bosh"
      "menyu asosiy"
      "yon   asosiy"
      ".     pastki";
    gap: 1rem;
    background-color: var(--rang-fon);
  }
  body > * {
    padding: 0.5rem 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  header { grid-area: bosh; }
  nav { grid-area: menyu; }
  main { grid-area: asosiy; }
  aside { grid-area: yon; }
  footer { grid-area: pastki; }
  aside {
    color: var(--rang-urgu);
  }
</style>
<header>Choyxona «Bahor»</header>
<nav aria-label="Taom turlari">Birinchi taomlar · Ichimliklar</nav>
<main>
  <h1>Menyu</h1>
  <p>Osh — 35 000 so'm</p>
  <p>Lag'mon — 28 000 so'm</p>
  <p>Manti — 30 000 so'm</p>
</main>
<aside>Kun taomi: osh</aside>
<footer>Har kuni 7:00 dan 23:00 gacha</footer>

Nimaga qarang: ekrandagi joylashuv CSS'dagi "rasm"ga to'liq mos. header ikki ustun bo'ylab, main o'ng ustunda ikki qator baland, nav va aside chap ustunda bir-birining ostida. footer faqat o'ng ustunda — chap pastki katak bo'sh. Har element faqat bitta qator oldi: grid-area: asosiy. Chiziq raqami ham, span ham yo'q.

Qatorlarning balandligini biz bermadik — ular mazmunicha. main da matn ko'p bo'lsa, u egallagan ikki qator birga o'sadi.

Natija bu yerda keng ekran uchun chizilgan: 12rem li yon ustun telefonda juda ko'p joy oladi. Telefonga moslashni pastda, «Telefon uchun qayta chizish» bo'limida qilamiz.

Tekshirib ko'ring: Quyidagi "rasm"da asosiy hududi nechta katakni egallaydi va u qanday shaklda?

"bosh bosh bosh" "yon asosiy asosiy" "yon asosiy asosiy"

3. Uch qoida

3.1 Qoida 1: har qatorda kataklar soni bir xil

Har satrdagi so'zlar soni teng bo'lishi kerak — to'r to'rtburchak. "bosh bosh" "menyu asosiy yon" — birinchi qatorda ikkita katak, ikkinchisida uchta. Brauzer buni tushunmaydi va butun deklaratsiyani tashlab ketadi. Chrome'da tekshirdik: Computed bo'limida grid-template-areas: none, hamma element avtomatik joylashtirishga qaytdi.

So'zlar orasidagi bo'sh joylar soni ahamiyatsiz. Shuning uchun "rasm"ni ustunlarga tekislab yozishadi — "menyu asosiy" va "yon asosiy" — ko'z uchun oson. Prettier bu bo'sh joylarga tegmaydi.

3.2 Qoida 2: hudud faqat to'rtburchak

Bitta nomli kataklar to'rtburchak hosil qilishi kerak. "L" harfi shaklidagi hudud mumkin emas:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  section:first-of-type {
    grid-template-areas:
      "osh  osh"
      "osh  choy";
  }
  section:last-of-type {
    grid-template-areas:
      "osh  osh"
      "manti choy";
  }
  p {
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--rang-asosiy);
  }
  .mashhur {
    grid-area: osh;
    border-color: var(--rang-urgu);
  }
</style>
<section>
  <p class="mashhur">❌ "L" shakl: osh</p>
  <p>Ko'k choy</p>
  <p>Manti</p>
</section>
<section>
  <p class="mashhur">✅ To'rtburchak: osh</p>
  <p>Ko'k choy</p>
  <p>Manti</p>
</section>

Nimaga qarang: tepadagi to'rda "rasm" ishlamadi. osh uch katakni "L" shaklida egallamoqchi edi — bu taqiqlangan, brauzer butun grid-template-areas ni tashladi. Ko'k choy va manti birinchi qatorga navbat bilan tushdi.

Osh kartasi esa o'ng pastki burchakda, to'rdan tashqaridagi tor ustunda qoldi. Nega? "Rasm" yo'q — demak, osh degan hudud ham yo'q. Brauzer uni noma'lum nom kabi to'r tashqarisiga qo'ydi (buni «Nom xato yozilsa» bo'limida ko'ramiz).

Pastdagi to'rda osh — birinchi qatorning ikkala katagi, to'g'ri to'rtburchak: u ishladi.

Pastdagi to'rda yana bir narsaga qarang. Ko'k choy va manti uchun grid-area yozmadik — ular avtomatik joylashtirish bilan bo'sh qolgan manti va choy kataklariga navbat bilan tushdi. Ko'k choy manti katagiga tushib qoldi: hudud nomi elementni "o'ziga tortmaydi". Nom bilan joylashishni istasangiz, har elementga grid-area bering.

3.3 Qoida 3: nuqta — bo'sh katak

Katak bo'sh qolishi kerak bo'lsa, unga nuqta (.) yoziladi. «Bahor» menyu sahifasidagi ". pastki" shu edi: chap pastki katak hech kimga tegishli emas. Bir nechta nuqta yonma-yon yozilsa (...), bu ham bitta bo'sh katak — tekislash uchun qulay. Chrome'da tekshirdik: "osh ..." ikki katakli qator bo'ldi.

Bitta tuzoq: "bo'sh" katak avtomatik joylashtirish uchun ochiq. grid-area siz elementlar bo'lsa, ular nuqtali katakka ham tushishi mumkin. Chrome'da tekshirdik: hududsiz uchinchi element aynan nuqtali katakni egalladi. Skelet to'rida hamma elementga hudud bering.

3.4 Nom xato yozilsa

grid-area dagi nom "rasm"da bo'lmasa — masalan, asosiy o'rniga asoiy — element yo'qolmaydi, lekin kutilmagan joyga tushadi. Brauzer bunday nom uchun to'rdan tashqarida yangi track'lar qo'shadi: implicit grid. Chrome'da tekshirdik: element to'rning pastki o'ng burchagidan tashqarida paydo bo'ldi.

Yana bir keng tarqalgan xato — nomni qo'shtirnoqqa olish: grid-area: "asosiy". grid-template-areas da qo'shtirnoq kerak edi, grid-area da esa u noto'g'ri — deklaratsiya tashlanadi va element navbatdagi bo'sh katakka tushadi. Qoida: qo'shtirnoq — faqat "rasm" satrlarida.

Bunday xatolarni topishning eng tez yo'li — DevTools grid overlay'i. Layout yorlig'ida "Show area names" ni yoqing: har hudud o'z nomi bilan chiziladi.

Tekshirib ko'ring: Nima uchun "bosh bosh" "menyu asosiy" "bosh pastki" ishlamaydi?

4. Telefon uchun qayta chizish

4.1 Bitta HTML — ikki "rasm"

Hududlarning eng katta kuchi shu yerda ochiladi. Telefonda 12rem li yon ustun kerak emas — hamma narsa bir-birining ostida tursin. Buning uchun HTML'ga ham, elementlardagi grid-area ga ham tegmaymiz. Faqat "rasm"ni ikki xil chizamiz.

Buning uchun media query kerak — ekran eniga qarab qoidani yoqadigan @media bloki. Uni Media queries darsida to'liq o'rganamiz. Hozir bitta shaklini bilish yetadi: @media (width >= 40rem) { ... } — "ekran eni kamida 40rem (640 piksel) bo'lsa, ichidagi qoidalarni qo'lla".

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  body {
    display: grid;
    grid-template-areas:
      "bosh"
      "menyu"
      "asosiy"
      "yon"
      "pastki";
    gap: 1rem;
    background-color: var(--rang-fon);
  }
  @media (width >= 40rem) {
    body {
      grid-template-columns: 12rem 1fr;
      grid-template-areas:
        "bosh  bosh"
        "menyu asosiy"
        "yon   asosiy"
        ".     pastki";
    }
  }
  body > * {
    padding: 0.5rem 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  header { grid-area: bosh; }
  nav { grid-area: menyu; }
  main { grid-area: asosiy; }
  aside { grid-area: yon; }
  footer { grid-area: pastki; }
  aside {
    color: var(--rang-urgu);
  }
</style>
<header>Choyxona «Bahor»</header>
<nav aria-label="Taom turlari">Birinchi taomlar · Ichimliklar</nav>
<main>
  <h1>Menyu</h1>
  <p>Osh — 35 000 so'm</p>
  <p>Lag'mon — 28 000 so'm</p>
  <p>Manti — 30 000 so'm</p>
</main>
<aside>Kun taomi: osh</aside>
<footer>Har kuni 7:00 dan 23:00 gacha</footer>

Tepadagi tugmalar bilan ekran enini almashtiring. Nimaga qarang: telefonda (360) beshala qism bitta ustunda, HTML tartibida turibdi. Planshet (768) va kompyuterda — avvalgi ikki ustunli skelet. Ikki holatda ham header, nav, main, aside va footer qoidalari bir xil: o'zgargani faqat body dagi "rasm" va ustunlar.

Yozish tartibiga e'tibor bering: avval telefon uchun oddiy "rasm", keyin keng ekran uchun qo'shimcha. Bu mobile-first yondashuv — uni Mobile-first darsida batafsil ko'ramiz. 40rem — kursning birinchi breakpointi (layout o'zgaradigan ekran eni), Media queries darsida nega aynan shu son ekanini tushuntiramiz.

4.2 Ko'z tartibi va HTML tartibi

"Rasm" bilan elementlarni istalgan joyga qo'yish mumkin: footer ni tepaga, aside ni main dan oldinga. HTML esa o'zgarmaydi. Bu kuchli, lekin xavfli.

O'tgan darsdagi dense kabi, bu yerda ham Tab tugmasi va ekran o'quvchi HTML tartibida yuradi, ko'z esa ekrandagi tartibda. Tasavvur qiling: aside da "Kun taomi" havolasi bor va "rasm"da yon eng tepaga qo'yildi. Bobur Tab bosganda fokus avval pastdagi menyu havolalariga, keyin tepadagi "Kun taomi" ga sakraydi. Malika esa uni sahifa oxirida eshitadi.

WCAG buni ikki mezonda talab qiladi: ma'no tartibi (1.3.2) va fokus tartibi (2.4.3) — ular ko'rinadigan tartibga mos bo'lsin. Qoida oddiy:

• HTML'ni mantiqiy tartibda yozing — sahifani o'qish tartibida.
• "Rasm"ni shu tartibga yaqin chizing. Yonma-yon qo'yish — xavfsiz. Pastdagini tepaga chiqarish — xavfli.
• Tekshiring: sahifani faqat Tab bilan aylanib chiqing — fokus ko'z bilan bir yo'nalishda yuryaptimi?

Batafsil — order va a11y darsida.

Tekshirib ko'ring: Dizayner telefonda "Kun taomi" (aside) ni menyudan oldin, eng tepada ko'rsatishni so'radi. "Rasm"ni o'zgartirasizmi yoki HTML'ni? Nega?

5. Qatorlar, ustunlar va qisqa yozuv

5.1 O'lchamlarni berish

"Rasm" faqat hududlarni aytadi — o'lchamlarni emas. Ustunlar va qatorlar eni odatdagi xususiyatlar bilan beriladi:

body {
  grid-template-columns: 12rem 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "bosh  bosh"
    "menyu asosiy"
    "yon   asosiy"
    ".     pastki";
}

Qatorlar soni "rasm"dagi satrlarga, ustunlar soni esa satrdagi so'zlarga mos bo'lsin. grid-template-rows dagi 1fr — agar sahifa ekrandan qisqa bo'lsa, yon qatori bo'sh joyni oladi va footer pastga tushadi. Buning uchun body ning o'zi ekran bo'yicha baland bo'lishi kerak — min-height: 100svh (Viewport birliklari). Butun sahifa uchun bunday naqsh Flex naqshlari darsidagi "sticky footer"ning grid'dagi jufti.

5.2 grid-template — hammasi bitta xususiyatda

Uchala xususiyatni birlashtiradigan qisqa yozuv bor — grid-template. Unda har "rasm" satridan keyin o'sha qatorning balandligi, oxirida esa / dan keyin ustunlar yoziladi:

body {
  grid-template:
    "bosh  bosh"   auto
    "menyu asosiy" auto
    "yon   asosiy" 1fr
    ".     pastki" auto
    / 12rem 1fr;
}

Bu yuqoridagi uchta xususiyat bilan bir xil. Chrome'da tekshirdik: qisqa yozuvdagi to'r DevTools Computed'da bir xil grid-template-areas, qator va ustun qiymatlarini beradi.

Qaysi birini yozish — did masalasi. Ko'p jamoalar uchta alohida xususiyatni afzal ko'radi: o'qish osonroq va ularning birini @media ichida alohida almashtirish mumkin. Lekin kutubxonalar va boshqalarning kodida qisqa yozuvni ko'p uchratasiz — uni o'qiy olishingiz kerak.

5.3 grid-area ning ikkinchi ma'nosi

grid-area — aslida qisqa yozuv. U o'tgan darsdagi to'rtta chiziq xususiyatini bitta qatorga yig'adi: grid-area: 2 / 1 / 4 / 3 — tartibi: qator boshi, ustun boshi, qator oxiri, ustun oxiri. Soat miliga teskari: tepa, chap, past, o'ng. Nom yozilsa — hududga, raqamlar yozilsa — chiziqlarga qo'yadi.

Raqamli shakl kamdan-kam ishlatiladi: o'qish qiyin. Bitta istisno — ustma-ust tushirish. Layout naqshlari darsida grid-area: 1 / 1 ni ko'p uchratasiz: bu o'tgan darsdagi grid-row: 1; grid-column: 1 ning qisqa yozuvi.

5.4 Hududlar chiziqlarga nom beradi

O'tgan darsda -start va -end bilan tugaydigan chiziq nomlari maxsus ekanini ko'rgan edik. Hududlar buni teskari tomondan ham beradi: har hudud atrofidagi chiziqlar avtomatik nom oladi. asosiy hududi uchun — asosiy-start va asosiy-end, ham ustun, ham qator bo'yicha.

Demak, elementni hudud chegarasi bo'yicha ham qo'yish mumkin: grid-column: pastki-start / pastki-end. Chrome'da tekshirdik — ishlaydi. Bu, masalan, bitta elementni "faqat asosiy ustun eni bo'ylab" joylash kerak bo'lganda qo'l keladi.

6. Ko'p uchraydigan xatolar

6.1 Qatorlarda kataklar soni har xil

Butun "rasm" tashlanadi. Tuzatish: har satrdagi so'zlarni sanang; bo'sh katak uchun . qo'ying.

6.2 "L" shaklidagi hudud

Butun "rasm" tashlanadi. Tuzatish: hudud to'rtburchak bo'lsin; murakkab shaklni ikki hududga bo'ling.

6.3 grid-area: "nom" — qo'shtirnoq bilan

Deklaratsiya tashlanadi, element navbatdagi bo'sh katakka tushadi. Tuzatish: grid-area: nom.

6.4 Nomda xato

Element to'r tashqarisiga, implicit track'ga tushadi. Tuzatish: DevTools'da "Show area names" bilan nomlarni solishtiring.

6.5 grid-area siz qolgan element

U nuqtali katakka yoki boshqa hududning bo'sh katagiga tushib qoladi. Tuzatish: skelet to'rida har bolaga grid-area bering.

6.6 "Rasm" bilan tartibni butunlay o'zgartirish

Tab va ekran o'quvchi ko'zdan boshqa tartibda yuradi. Tuzatish: HTML'ni mantiqiy tartibda yozing, "rasm"ni unga yaqin chizing.

7. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): "Rasm"ni o'qing

.sahifa {
  grid-template-areas:
    "bosh   bosh   bosh"
    "menyu  asosiy yon"
    "pastki pastki pastki";
}

1. To'rda nechta qator va nechta ustun bor? — [:3] qator, [:3] ustun
2. asosiy hududi nechta katakni egallaydi? —
3. pastki qaysi chiziqdan qaysi ustun chizig'igacha? — [:1] dan [:4] gacha

Ishora: satrlar — qatorlar, satrdagi so'zlar — ustunlar. Chiziqlar ustunlardan bitta ko'p.

2-mashq (o'rta): Buzilgan "rasm"lar

Har birida nima xato va brauzer nima qiladi? Tuzating.

.a {
  grid-template-areas:
    "bosh bosh"
    "menyu asosiy yon";
}

.b {
  grid-template-areas:
    "bosh   asosiy"
    "asosiy asosiy";
}

.c main {
  grid-area: "asosiy";
}

Ishora: «Uch qoida» va «Nom xato yozilsa».

3-mashq (qiyin): Taom kartasi ichidagi "rasm"

«Bahor» taom kartasi (.taom-karta) ichida to'rtta element bor: rasm o'rnidagi gradientli div, sarlavha h3.taom-nomi, tavsif p va narx p.narx.

• Telefonda (tor ekranda): rasm tepada, ostida sarlavha, tavsif va narx — ustma-ust.
• 40rem dan keng ekranda: rasm chapda, 8rem enli, uch qator baland; o'ngda sarlavha, tavsif va narx.
• HTML tartibi: sarlavha, rasm, tavsif, narx. Nega sarlavha rasmdan oldin yozilgan? "Rasm" bu tartibni buzadimi?

Ishora: div va p lar uchun selektorlar — .taom-karta div, .taom-karta p:not(.narx). «Ko'z tartibi va HTML tartibi» ni eslang.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: grid;
    grid-template-areas:
      "rasm"
      "nom"
      "tavsif"
      "narx";
    column-gap: 1rem;
    max-width: 36rem;
    padding: 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  @media (width >= 40rem) {
    .taom-karta {
      grid-template-columns: 8rem 1fr;
      grid-template-areas:
        "rasm nom"
        "rasm tavsif"
        "rasm narx";
    }
  }
  .taom-karta div {
    grid-area: rasm;
    min-height: 6rem;
    border-radius: 0.5rem;
    background: linear-gradient(
      135deg, var(--rang-asosiy), var(--rang-urgu)
    );
  }
  .taom-nomi {
    grid-area: nom;
  }
  .taom-karta p:not(.narx) {
    grid-area: tavsif;
    margin: 0;
  }
  .narx {
    grid-area: narx;
    color: var(--rang-urgu);
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <div></div>
  <p>Toshkent oshi: guruch, sabzi, mol go'shti va no'xat.</p>
  <p class="narx">35 000 so'm</p>
</article>

4-mashq: Portfolio qadami — bosh sahifa "rasm"i

Portfoliongizning bosh sahifasi telefonda yaxshi: hamma narsa bitta ustunda. Keng ekranda esa kirish matni va rasm yonma-yon, "So'nggi loyihalar" va "Nimalarni bilaman" bo'limlari ham yonma-yon tursin. Sarlavha — butun en.

1. Faqat 40rem dan keng ekranda: bosh sahifaning main i — ikki ustunli to'r, chap ustun o'ngdagidan kengroq (3:2), ustunlar orasida 2rem.
2. "Rasm"ni chizing: sarlavha — butun en; ikkinchi qatorda kirish va rasm; uchinchisida loyiha va bilim.
3. main ning bolalarini hududlarga qo'ying. Qoidalar faqat bosh sahifaga ta'sir qilsin — boshqa sahifalardagi main ga tegmasin.
4. 360, 768 va 1280 piksel enida tekshiring. Tab bilan bosh sahifani aylanib chiqing: fokus tartibi ko'z tartibiga mosmi?

Ishora: bosh sahifa main ining bevosita bolalari — h1, p, img va ikkita section. Rasm va media darsida bosh sahifa rasmini main > img bilan tanlagan edingiz: bevosita bola img faqat bosh sahifada bor. "img bolasi bor main" — main:has(> img) (Mantiqiy pseudo-klasslar). @media — «Bitta HTML — ikki "rasm"» dagi shakl.

/* Bosh sahifa: keng ekranda ikki ustunli "rasm" */
@media (width >= 40rem) {
  main:has(> img) {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "sarlavha sarlavha"
      "kirish   rasm"
      "loyiha   bilim";
    column-gap: 2rem;
  }

  main:has(> img) > h1 {
    grid-area: sarlavha;
  }

  main:has(> img) > p {
    grid-area: kirish;
  }

  /* float qoidasining eni va margin'i grid'da kerak emas */
  main:has(> img) > img {
    grid-area: rasm;
    inline-size: auto;
    margin: 0;
  }

  main:has(> img) > section:first-of-type {
    grid-area: loyiha;
  }

  main:has(> img) > section:last-of-type {
    grid-area: bilim;
  }
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
  }
  *,
  *::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 {
    inline-size: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  :where(h1, h2) {
    color: var(--rang-asosiy);
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  main > img {
    float: inline-end;
    inline-size: min(45%, 15rem);
    margin-block: 0 1rem;
    margin-inline: 1rem 0;
    border-radius: 0.5rem;
  }
  main > section + section {
    clear: both;
  }
  @media (width >= 40rem) {
    main:has(> img) {
      display: grid;
      grid-template-columns: 3fr 2fr;
      grid-template-areas:
        "sarlavha sarlavha"
        "kirish   rasm"
        "loyiha   bilim";
      column-gap: 2rem;
    }
    main:has(> img) > h1 { grid-area: sarlavha; }
    main:has(> img) > p { grid-area: kirish; }
    main:has(> img) > img {
      grid-area: rasm;
      inline-size: auto;
      margin: 0;
    }
    main:has(> img) > section:first-of-type {
      grid-area: loyiha;
    }
    main:has(> img) > section:last-of-type {
      grid-area: bilim;
    }
  }
</style>
<main id="asosiy">
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <p>Veb-saytlarni noldan o'rganyapman. Hozir HTML'ni to'liq
  bilaman: semantika, formalar, accessibility va SEO.
  Keyingi qadam — CSS.</p>
  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
       viewBox='0 0 480 320'><rect width='480' height='320'
       fill='%231f6f4a'/><rect x='60' y='60' width='360'
       height='200' rx='12' fill='%23e8f1ec'/></svg>"
       alt="Noutbukda ochiq turgan HTML kod"
       width="480" height="320">
  <section>
    <h2>So'nggi loyihalar</h2>
    <ul>
      <li><a href="loyihalar/bahor/">Choyxona «Bahor» sayti</a></li>
      <li><a href="loyihalar/">Barcha loyihalar</a></li>
    </ul>
  </section>
  <section>
    <h2>Nimalarni bilaman</h2>
    <ul>
      <li>Semantik HTML va sahifa landmarklari</li>
      <li>Accessible formalar va brauzer validatsiyasi</li>
      <li>SEO va Open Graph meta teglari</li>
    </ul>
  </section>
</main>

8. Real ishda

• Sahifa skeletlari — sarlavha, yon panel, asosiy qism, footer — ko'p saytlarda aynan grid-template-areas bilan quriladi. Kodni o'qigan hamkasb sahifani "rasm"dan bir qarashda tushunadi.
• Admin panellar va dashboardlar — breakpointlarda "rasm" butunlay qayta chiziladi: telefonda yon menyu yashirinadi, planshetda tepaga chiqadi.
• Komponent ichida ham: karta, mahsulot sahifasi, forma — 3-mashqdagi kabi kichik "rasm"lar ham odatiy.
• Intervyuda so'raladi: "grid-template-areas qanday ishlaydi va uning cheklovlari nima?", "Responsive layoutni HTML'ga tegmasdan qanday o'zgartirasiz?", "CSS bilan tartibni o'zgartirishning accessibility xavfi nima?".

Xulosa

• grid-template-areas — sahifaning "rasm"i: satr — qator, so'z — katak, takrorlangan nom — bir necha katakli hudud.
• Element hududga grid-area: nom bilan tushadi — qo'shtirnoqsiz.
• Uch qoida: qatorlarda kataklar soni teng, hudud faqat to'rtburchak, bo'sh katak — .; buzilsa, butun "rasm" tashlanadi.
• @media ichida faqat "rasm" va ustunlarni qayta chizish yetadi — HTML va elementlar qoidasi o'zgarmaydi.
• grid-template — qatorlar, ustunlar va hududlarning qisqa yozuvi; hudud nom-start/nom-end chiziqlarini yaratadi.
• HTML tartibi mantiqiy bo'lsin: Tab va ekran o'quvchi "rasm"ni emas, HTML'ni kuzatadi.

Keyingi dars: Grid'da tekislash — elementni katak ichida va butun to'rni konteyner ichida tekislash: justify-items, align-self, place-content.

Manbalar

• MDN: "grid-template-areas", "grid-area", "grid-template", "Grid template areas" (qo'llanma) — developer.mozilla.org
• W3C: "CSS Grid Layout Module Level 2", 7.3 Named Areas va 7.4 Explicit Grid Shorthand — w3.org/TR/css-grid-2
• W3C: "Understanding SC 1.3.2: Meaningful Sequence" va "Understanding SC 2.4.3: Focus Order" — w3.org/WAI/WCAG22/Understanding
• Chrome for Developers: "Inspect CSS grid layouts" (Show area names) — developer.chrome.com/docs/devtools/css/grid