CSS layout naqshlari: full-bleed, rasm ustida matn, masonry va "flex yoki grid?"

Qisqacha: Ko'p saytlar bir necha tayyor layout retseptidan yig'iladi. Full-bleed — matn o'rtadagi tor ustunda, rasm yoki banner esa ekranning butun enida; buni nomli chiziqli uch ustunli grid beradi. Ustma-ust qatlam — ikki elementga bir xil grid-area: 1 / 1 berilsa, ular bitta katakka tushadi: rasm ustida matn. Masonry (g'isht devori) uchun yangi display: grid-lanes hali Baseline emas, bugun uning o'rniga columns ishlatiladi. Tanlov qoidasi: bir o'qdagi kontent — flex, ikki o'lchamli layout — grid.

Bu darsda

• Nomli chiziqlar bilan full-bleed va "breakout" layout yozasiz.
• grid-area: 1 / 1 bilan rasm ustiga matn qo'yasiz va uni position usulidan farqlaysiz.
• Sidebar va holy grail layoutlarini grid bilan quring.
• Masonry'ning bugungi holatini bilasiz va columns bilan zaxira yechim yozasiz.
• Multi-column xususiyatlarini (column-count, column-width, break-inside) ishlatasiz.
• Har vazifa uchun "flex yoki grid?" savoliga asosli javob berasiz.

Oldin bilishingiz kerak: subgrid, Flex naqshlari va markazlash, Joylashtirish: nomli chiziqlar, grid-template-areas, Grid'da tekislash.

1. Nega bu kerak?

Flexbox va Grid'ning hamma xususiyatini o'rgandingiz. Endi ular bilan nima qurish kerak?

Oshxonani eslang. Rustam aka har bir ziravorni biladi, lekin har kuni ularni noldan aralashtirmaydi — osh, lag'mon, manti uchun tayyor retseptlari bor. Saytlar ham bir necha tayyor layout retseptidan yig'iladi. Bu darsda eng ko'p uchraydiganlarini ko'ramiz. Oxirida eng muhim savolga javob beramiz: qachon flex, qachon grid?

2. Full-bleed: tor matn, keng rasm

2.1 Muammo

Matematik funksiyalar darsida o'qish uchun matn ustunini tor qildik: width: min(100% - 2rem, 70ch). Qator uzun bo'lsa, ko'z keyingi qatorga o'tishda adashadi. Lekin «Bahor» blogidagi maqolada rasm va aksiya banneri ekranning butun eni bo'ylab cho'zilishi kerak. Tor ustun ichidagi element esa ustundan chiqa olmaydi.

Eski yechim — elementga width: 100vw va manfiy margin berish. Uning yashirin tuzog'i bor — «Ko'p uchraydigan xatolar» bo'limida ko'ramiz. Grid'da esa toza yechim bor.

2.2 Uch ustunli to'r

Joylashtirish darsida aksiya lentasini toliq va kontent nomli chiziqlar bilan ekran chetigacha cho'zgan edik. U yerda o'rtadagi ustun 1fr edi — keng ekranda matn ham cheksiz kengayardi. Endi to'liq retsept: ikki chetda egiluvchan bo'sh joy, o'rtada eni cheklangan matn ustuni.

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  main {
    display: grid;
    grid-template-columns:
      [toliq-start] minmax(1rem, 1fr)
      [kontent-start] min(100% - 2rem, 60ch)
      [kontent-end] minmax(1rem, 1fr) [toliq-end];
  }
  main > * { grid-column: kontent; }
  main > figure,
  main > .aksiya { grid-column: toliq; }
  figure { margin: 0; }
  svg { display: block; width: 100%; height: 8rem; }
  .aksiya {
    padding: 1rem;
    background-color: #b4461a;
    color: #fff;
    text-align: center;
  }
</style>
<main>
  <h1>Rustam akaning osh sirlari</h1>
  <p>Guruch kechqurun namlanadi. Ertalab qozonda yog' qiziydi,
  go'sht qovuriladi, keyin sariq sabzi solinadi.</p>
  <figure>
    <svg viewBox="0 0 400 100" preserveAspectRatio="none"
         role="img" aria-label="Qozon ustidagi bug'">
      <rect width="400" height="100" fill="#2f6b3a"/>
      <ellipse cx="200" cy="100" rx="120" ry="40" fill="#1a5d1a"/>
    </svg>
  </figure>
  <p>Zira qo'l bilan ezilib solinadi — shunda hidi ochiladi.</p>
  <p class="aksiya">Bugun osh bilan ko'k choy — tekin!</p>
</main>

Nimaga qarang: sarlavha va paragraflar o'rtadagi tor ustunda. Yashil rasm va qizg'ish aksiya esa chetdan chetgacha cho'zilgan. 1280 tugmasini bosing: matn ustuni 60ch da qoladi, rasm esa butun enga kengayadi. 360 da ham matn chetlardan 1rem uzoqda.

2.3 Qatorma-qator

|  1fr ≥ 1rem  |  matn: ≤ 60ch  |  1fr ≥ 1rem  |
^              ^                ^              ^
toliq-start    kontent-start    kontent-end    toliq-end
|<------------------- toliq ------------------>|
               |<--- kontent -->|

Nimaga qarang: to'rtta chiziq va ular orasida uchta ustun. Chetdagi ustunlar kamida 1rem, qolgan hamma joyni teng bo'lib oladi (1fr). O'rtadagi ustun — matn uchun, ko'pi bilan 60ch.

• [toliq-start] va [toliq-end] — eng chetdagi chiziqlar. Bir juft -start/-end nomi yashirin hudud yaratadi (Joylashtirish), shuning uchun grid-column: toliq butun enni oladi.
• [kontent-start] va [kontent-end] — matn ustunining chegaralari. grid-column: kontent — faqat o'rtadagi ustun.
• main > * { grid-column: kontent; } — hamma bola sukutda matn ustunida. Usiz har bola avtomatik keyingi katakka tushadi («Ko'p uchraydigan xatolar» bo'limida ko'ramiz).
• main > figure va .aksiya — faqat shular toliq ga chiqadi.

Maslahat: Full-bleed elementdagi matn chekkaga yopishmasligi uchun unga padding bering. Aksiyada matn o'rtada — bunday bannerda bu yaxshi ko'rinadi.

2.4 Breakout — o'rtacha kenglik

Ba'zan element matndan kengroq, lekin butun ekrandan torroq bo'lishi kerak. Masalan, kartalar to'ri yoki jadval. Buning uchun yana bir juft chiziq qo'shiladi:

main {
  display: grid;
  grid-template-columns:
    [toliq-start] minmax(1rem, 1fr)
    [keng-start] minmax(0, 8rem)
    [kontent-start] min(100% - 2rem, 60ch)
    [kontent-end] minmax(0, 8rem)
    [keng-end] minmax(1rem, 1fr) [toliq-end];
}

main > * { grid-column: kontent; }
main > .jadval-orami { grid-column: keng; }

minmax(0, 8rem) ustunlar tor ekranda nolga qisqaradi, kengida matnning har tarafiga 8rem gacha qo'shadi. Endi uchta kenglik bor: kontent, keng va toliq. «Bahor» menyusining narx jadvali (.jadval-orami) matndan keng, ekrandan tor turadi.

Tekshirib ko'ring: Full-bleed to'rda main > * { grid-column: kontent; } qatori bor. Yangi blockquote qo'shdingiz, unga hech narsa yozmadingiz. U qaysi kenglikda chiziladi?

3. Ustma-ust qatlam: rasm ustida matn

3.1 grid-area: 1 / 1

Joylashtirish darsida ikki element bitta katakka tushsa, ustma-ust chizilishini ko'rgan edik. Odatda bu xato. Lekin rasm ustiga matn qo'yish kerak bo'lsa — aynan shu kerak.

«Bahor» bosh sahifasining yuqori qismi — hero (inglizcha "qahramon": sahifaning eng katta, birinchi ko'rinadigan bloki). Orqada manzara, ustida nom va tugma:

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  header { display: grid; }
  header > * { grid-area: 1 / 1; }
  svg { width: 100%; height: 100%; min-height: 12rem; }
  header > div {
    place-self: center;
    padding: 2rem 1rem;
    text-align: center;
    color: #fff;
  }
  h1 { margin: 0 0 0.5rem; }
  .bron-havola {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #fffaf0;
    color: #1a5d1a;
  }
</style>
<header>
  <svg viewBox="0 0 400 160" preserveAspectRatio="xMidYMid slice"
       aria-hidden="true">
    <defs>
      <linearGradient id="osmon" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#1a5d1a"/>
        <stop offset="1" stop-color="#2f6b3a"/>
      </linearGradient>
    </defs>
    <rect width="400" height="160" fill="url(#osmon)"/>
    <circle cx="365" cy="32" r="14" fill="#b4461a"/>
    <path d="M0 130 Q100 90 200 125 T400 115 V160 H0Z"
          fill="#16301b"/>
  </svg>
  <div>
    <h1>Choyxona «Bahor»</h1>
    <p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
    <a class="bron-havola" href="bron/">Stol band qilish</a>
  </div>
</header>

Nimaga qarang: matn manzaraning ustida, aynan o'rtasida. Ikkala element ham grid-area: 1 / 1 oldi — "1-qator chizig'idan, 1-ustun chizig'idan". Ikkalasi birinchi katakka tushdi. HTML'da keyin kelgan div ustida chiziladi. place-self: center (Grid'da tekislash) uni katak o'rtasiga qo'ydi.

grid-area: 1 / 1 — grid-row: 1 va grid-column: 1 ning qisqa yozuvi. Katta layoutda aniqroq yozing: grid-area: 1 / 1 / 2 / 2 — "1-qator va 1-ustun chizig'idan 2-chiziqlargacha".

3.2 Nega position: absolute emas?

position darsidagi usul ham ishlaydi: otaga position: relative, matnga position: absolute; inset: 0. Lekin absolute element oqimdan chiqadi — ota uning balandligini bilmaydi. Matn rasmdan uzun bo'lsa, pastga toshib, keyingi blok ustiga chiqadi.

Grid'da ikkala element ham oddiy grid elementi, katak balandrog'iga moslashadi. Chrome'da tekshirdik: 360 enda matn bloki 213 piksel, manzaraning eng kichik balandligi 192 piksel (12rem). Hero matn bo'yicha 213 pikselgacha o'sdi, manzara esa height: 100% bilan butun katakni to'ldirdi. SVG'dagi preserveAspectRatio="xMidYMid slice" rasmni cho'zmay, chetlarini kesib to'ldiradi. Oddiy img da buning jufti — object-fit: cover (Rasm va media).

3.3 O'qilishni unutmang

Rasm ustidagi matn — kontrastning eng xavfli joyi. Rasmning bir joyi to'q, boshqasi och. Oq matn och joyga tushsa, o'qilmay qoladi. Shuning uchun kontrastni rasmning eng och qismiga nisbatan tekshiring (Accessibility'ni tekshirish).

Ikki yordamchi usul:

• Rasm bilan matn orasiga yarim shaffof qatlam qo'ying: yana bitta grid-area: 1 / 1 li element, fon — rgb(0 0 0 / 0.5).
• Yoki matn qutisining o'ziga to'q fon bering.

Bizning manzarada matn to'q yashil joyga tushadi. Oq matnning eng och yashil #2f6b3a ga kontrasti — taxminan 6.4.

Ekran o'quvchi uchun ham o'ylang: manzara bezak, shuning uchun aria-hidden="true". Ma'noli rasm bo'lsa — img va alt (Rasm).

Tekshirib ko'ring: Hero'da header > * { grid-area: 1 / 1; } qatorini o'chirsangiz, nima bo'ladi?

4. Sahifa layoutlari

4.1 Sidebar: asosiy kontent va yon panel

«Bahor» blogining maqola sahifasi: chapda maqola, o'ngda "Rustam akaning maslahati" paneli. Telefonda panel maqola ostiga tushadi:

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  main {
    display: grid;
    gap: 1.5rem;
    padding: 1rem;
  }
  aside {
    padding: 1rem;
    border-left: 4px solid #2f6b3a;
    background-color: #e8f1ec;
  }
  article > *, aside > * { margin-top: 0; }
  @media (width >= 40rem) {
    main { grid-template-columns: minmax(0, 1fr) 14rem; }
  }
</style>
<main>
  <article>
    <h1>Osh sirlari</h1>
    <p>Guruch kechqurun namlanadi. Ertalab qozonda yog' qiziydi,
    go'sht qovuriladi, keyin sariq sabzi solinadi. Sabzi yumshagach
    zira qo'shiladi va suv quyiladi.</p>
  </article>
  <aside>
    <h2>Maslahat</h2>
    <p>Qozonni olovdan olgach, oshni 20 daqiqa damlang.</p>
  </aside>
</main>

Nimaga qarang: kompyuter enida panel o'ngda, eni 14rem. Maqola qolgan joyni oldi. 360 da bitta ustun — panel maqola ostida. Ustun faqat keng ekranda (40rem dan) qo'shiladi, grid-template-areas darsidagi kabi. @media qoidasini Media queries darsida to'liq o'rganamiz — hozir "shu endan kattada" deb o'qing.

minmax(0, 1fr) — repeat() va minmax() darsidagi tuzoqdan himoya: maqolada uzun kod bo'lsa, oddiy 1fr ustun toshib ketardi. Media query'siz sidebar ham bor — uni Intrinsic layout darsida ko'ramiz.

4.2 Holy grail

"Holy grail" (muqaddas qadah) — web'ning eski orzusi. Tepada header, pastda footer, o'rtada uch ustun: menyu, kontent, panel. Kontent kam bo'lsa ham footer ekran pastida turadi. 2000-yillarda buni float va hiylalar bilan yozishardi, grid'da esa bir necha qator:

<style>
  body {
    display: grid;
    grid-template-areas: "bosh" "menyu" "asosiy" "yon" "pastki";
    grid-template-rows: auto auto 1fr auto auto;
    min-height: 100dvh;
    margin: 0;
    font-family: system-ui, sans-serif;
  }
  header { grid-area: bosh; }
  nav { grid-area: menyu; }
  main { grid-area: asosiy; }
  aside { grid-area: yon; }
  footer { grid-area: pastki; }
  body > * { padding: 0.5rem 1rem; }
  header, footer { background-color: #2f6b3a; color: #fff; }
  nav, aside { background-color: #e8f1ec; }
  @media (width >= 40rem) {
    body {
      grid-template-areas:
        "bosh   bosh   bosh"
        "menyu  asosiy yon"
        "pastki pastki pastki";
      grid-template-columns: 9rem minmax(0, 1fr) 9rem;
      grid-template-rows: auto 1fr auto;
    }
  }
</style>
<header>Choyxona «Bahor»</header>
<nav aria-label="Asosiy menyu">Menyu · Bron · Aloqa</nav>
<main>Bugungi taomlar ro'yxati</main>
<aside>Aksiya: ko'k choy</aside>
<footer>7:00–23:00</footer>

Nimaga qarang: 800 va 1280 enida uch ustun, footer esa oyna pastida. 360 da hamma bo'lim biri ostida biri, tartib HTML bilan bir xil. Bu natija oynasining balandligi 400 piksel — 100dvh (Viewport birliklari) shunga teng.

Ikki muhim qator:

• min-height: 100dvh — body kamida ekran balandligida. Flex naqshlari darsidagi sticky footer'ning grid varianti.
• grid-template-rows: auto 1fr auto — header va footer kontent balandligida, o'rtadagi qator esa qolgan hamma joyni oladi. Footer pastga itariladi.

Diqqat: Katta ekranda menyu chapda, panel o'ngda, lekin HTML tartibi o'zgarmadi: header, nav, main, aside, footer. Klaviatura bilan yuradigan Bobur va ekran o'quvchidagi Malika sahifani aynan shu tartibda o'tadi. order darsidagi qoida grid'ga ham tegishli: joylash ko'rinishni o'zgartiradi, ma'no tartibini emas.

5. Masonry: g'isht devori

5.1 Bu nima

Pinterest yoki fotogalereyalarni eslang: kartalar ustunlarga tizilgan, har biri o'z balandligida. Har karta o'z ustunidagi oldingi kartaning darhol ostiga tushadi. G'isht teruvchi (inglizcha mason) devorni shunday teradi — nomi shundan: masonry.

Oddiy grid buni qila olmaydi: unda qatorlar bor, qatordagi eng baland karta qo'shnilari ostida bo'sh joy qoldiradi.

5.2 CSS'da hozirgi holat

Masonry uchun CSS'ga alohida imkoniyat qo'shilmoqda. Mavzu tez o'zgaryapti, shuning uchun faqat manbalar aytganini sanasi bilan yozamiz:

• Spetsifikatsiya (CSS'ning rasmiy qoidalar hujjati): "CSS Grid Layout Module Level 3", Editor's Draft (qoralama), 2026-yil 2-sentabr holati. U bu layoutni grid lanes (grid yo'laklari) deydi va display: grid-lanes qiymatini beradi.
• MDN (sahifa 2026-yil 27-avgustda yangilangan): "Grid lanes layout" — tajribaviy (experimental), "Limited availability". Ya'ni Baseline emas.
• web-features (Baseline belgisi olinadigan ochiq ma'lumotlar; 2026-yil 24-sentabrdagi versiya): "Grid lanes" — Baseline emas. Faqat Safari 26.4 da (macOS va iOS) ishlaydi. Chrome, Edge va Firefox'da yo'q.
• Chrome'da tekshirdik (154-versiya): display: grid-lanes qatori tashlab yuborildi.

Spetsifikatsiya va MDN'dagi yozuv shunday:

section {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}

Ustunlar oddiy grid'dagi kabi chiziladi, kartalar esa har safar eng qisqa ustunga tushadi.

Diqqat: Eski maqola va videolarda grid-template-rows: masonry va display: masonry yozuvlarini uchratasiz. Ular shu g'oyaning oldingi takliflari edi — Baseline ma'lumotlarida ham "masonry" endi "grid-lanes" ga ko'chirilgan. Yangi kodda ularni ishlatmang. Ishlatishdan oldin MDN va Baseline holatini qayta tekshiring.

5.3 Bugungi yechim: columns

Masonry'ga o'xshash ko'rinishni bugun hamma brauzerda multi-column (ko'p ustunli matn) beradi. U gazetadagi kabi kontentni ustunlarga oqizadi. «Bahor» mehmonlarining fikrlari:

<style>
  section {
    columns: 3;
    column-gap: 1rem;
    max-width: 36rem;
    font-family: system-ui, sans-serif;
  }
  figure {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  blockquote { margin: 0; }
  figcaption { margin-top: 0.5rem; color: #5b6660; }
</style>
<section>
  <figure><blockquote>Osh zo'r!</blockquote>
    <figcaption>— Ali</figcaption></figure>
  <figure><blockquote>Lag'mon qo'lda cho'zilgani sezilib turadi.
    Xamiri yumshoq, go'shti ko'p. Albatta yana kelamiz.</blockquote>
    <figcaption>— Malika</figcaption></figure>
  <figure><blockquote>Choy tez keldi.</blockquote>
    <figcaption>— Jasur</figcaption></figure>
  <figure><blockquote>Manti katta, qovoqlisi ayniqsa mazali.
    </blockquote><figcaption>— Otabek</figcaption></figure>
  <figure><blockquote>Ofitsiantlar xushmuomala.</blockquote>
    <figcaption>— Bobur</figcaption></figure>
</section>

Nimaga qarang: kartalar uch ustunda, har biri o'z balandligida — g'isht devoriga o'xshash. Lekin bir karta ikki ustun orasida bo'linib qoldi: boshi bir ustun pastida, qolgani keyingi ustun tepasida. Sababi: multi-column matn uchun yaratilgan. Gazetada paragraf ustundan ustunga o'tishi normal, karta uchun esa bu buzilish.

Tuzatish — bitta qator:

figure {
  break-inside: avoid; /* karta ichida ustun uzilmasin */
}

break-inside: avoid — "shu element ichida uzilish bo'lmasin". Karta butunligicha bitta ustunda qoladi. "Tahrirlab ko'rish" bilan figure ga qo'shib ko'ring. Baseline ma'lumotiga ko'ra u 2020-yil yanvardan beri hamma asosiy brauzerda ishlaydi (bugun — Baseline Widely available).

5.4 columns ning bitta kamchiligi — tartib

columns kartalarni ustun bo'ylab to'ldiradi: avval birinchi ustun pastigacha, keyin ikkinchi ustun. Ko'z esa chapdan o'ngga o'qiydi. Shuning uchun tartib chalkashadi: 1-karta yonida 2-emas, 3-karta turadi (ikkinchisi uning ostida). Fikrlar yoki fotosuratlar uchun bu muhim emas. Sana bo'yicha tartiblangan yangiliklar uchun esa oddiy grid kartalar (repeat() va minmax()) yaxshiroq: bo'sh joy qolsa ham, tartib aniq.

"Brauzer qo'llasa — grid-lanes, bo'lmasa — columns" deb ulash ham mumkin. Buning uchun @supports qoidasi kerak — uni Brauzer mosligi darsida o'rganamiz, hozir bilish shart emas.

Tekshirib ko'ring: Nega masonry uchun oddiy display: grid va grid-auto-rows: auto yetmaydi?

6. Multi-column: matnni ustunlarga oqizish

6.1 Xususiyatlar

Multi-column'ning asl ishi — kalta elementli uzun ro'yxatni ustunlarga bo'lish. «Bahor»ning ichimliklar ro'yxati:

<style>
  section {
    columns: 9rem;
    column-gap: 2rem;
    column-rule: 1px solid #c9d6cf;
    max-width: 40rem;
    font-family: system-ui, sans-serif;
  }
  h2 { column-span: all; margin-top: 0; color: #2f6b3a; }
  ul { margin: 0; }
  li { break-inside: avoid; }
</style>
<section>
  <h2>Ichimliklar</h2>
  <ul>
    <li>Ko'k choy</li><li>Qora choy</li><li>Limonli choy</li>
    <li>Kompot</li><li>Ayron</li><li>Qatiq</li><li>Sharbat</li>
    <li>Mineral suv</li><li>Kofe</li><li>Kakao</li>
  </ul>
</section>

Nimaga qarang: 800 enda ro'yxat uch ustunda, orasida ingichka chiziq. "Ichimliklar" sarlavhasi uchala ustun ustidan o'tadi (column-span: all). 360 da ustunlar ikkita — media query yo'q, brauzer joyga qarab o'zi hisobladi.

columns: 9rem — eng foydali shakl. Ustunlar soni tor ekranda o'zi kamayadi. column-count esa telefonda ham 3 ta ustunni majburlaydi va matn siqilib qoladi.

6.2 Uzun matn uchun ehtiyot bo'ling

Uzun maqolani gazetadagidek ustunlarga bo'lmang. Ustun ekrandan uzun bo'lsa, o'quvchi birinchi ustunni pastgacha skroll qiladi, keyin ikkinchisi uchun yana tepaga qaytadi. Multi-column — kalta ro'yxatlar, teglar va fikrlar kartalari uchun.

7. Flex yoki grid?

7.1 Asosiy qoida

Qoida qisqa: kontent bir o'qda tizilsa — flex, layout ikki o'lchamli bo'lsa — grid.

Uni boshqa so'zlar bilan ham aytish mumkin:

• Flex — kontentdan tashqariga. Elementlar o'z o'lchamini kontentdan oladi va qatorga sig'ganicha joylashadi. Konteyner "sizlar qancha joy olasiz?" deb so'raydi.
• Grid — layoutdan ichkariga. Avval to'r chiziladi, elementlar tayyor kataklarga tushadi. Konteyner "sizga shu joy" deydi.

flowchart TD
  S{"Qatorlar ham, ustunlar ham<br/>tekis turishi kerakmi?"}
  S -->|Ha| G["Grid"]
  S -->|Yo'q, bitta o'q| O{"Elementlar eni<br/>kontentga bog'liqmi?"}
  O -->|Ha| F["Flex"]
  O -->|Yo'q, teng ustunlar| G
  G --> Q{"Karta ichi qo'shnilar<br/>bilan bir chiziqdami?"}
  Q -->|Ha| SG["Subgrid"]

Nimaga qarang: birinchi savol — ikki o'lchamdami. Bitta o'qda bo'lsa ham, elementlar teng ustunlarda turishi kerak bo'lsa — baribir grid. Kartalar ichini qo'shnilarga tekislash kerak bo'lsa — subgrid.

7.2 Misollar

Nimaga qarang: flex qatorlari — elementlar o'z enini o'zi tanlaydigan joylar. Grid qatorlari — joy oldindan belgilangan joylar.

7.3 Ikkalasi birga

Haqiqiy sahifada savol "yoki-yoki" emas. «Bahor» menyu sahifasining tuzilishi:

• body — grid (header, main, footer).
• header ichidagi menyu — flex.
• Taomlar ro'yxati — grid kartalar.
• Har karta — subgrid.
• Karta ichidagi teglar qatori — flex-wrap.

Har qavatda o'z vositasi. Grid va flex bir-biriga raqib emas — ular bir jamoa.

Tekshirib ko'ring: «Bahor» footer'ida uch narsa bir qatorda: manzil, telefon va ijtimoiy tarmoq havolalari. Telefonda ular ustma-ust tushishi kerak. Flex yoki grid?

8. Ko'p uchraydigan xatolar

8.1 100vw bilan full-bleed — gorizontal skroll

Eski usul: width: 100vw; margin-inline: calc(50% - 50vw);. 100vw — oynaning butun eni, skroll chizig'i bilan birga. Windows'dagi Chrome'da tekshirdik: sahifa uzun bo'lib, vertikal skroll chizig'i paydo bo'lgach, bunday element sahifadan kengroq bo'ldi. Pastda gorizontal skroll paydo bo'ldi. Tuzatish: grid bilan full-bleed (darsning boshida) — u % va fr bilan ishlaydi, skroll chizig'ini hisobga oladi.

8.2 main > * unutilgan

Bolalarga grid-column berilmasa, ular avtomatik joylashadi: birinchisi chap chetdagi ustunga, ikkinchisi o'rtadagiga, uchinchisi o'ngdagiga. Chrome'da tekshirdik: 360 enda chap ustun atigi 16 piksel (1rem), sarlavha shunga tushdi. Uning har so'zi alohida qatorga tushib, ustundan toshib chiqdi. Tuzatish: main > * { grid-column: kontent; }.

8.3 Grid'da margin'lar birlashmaydi

Margin sirlari darsida ketma-ket paragraflarning margin'lari birlashardi (collapsing). Grid elementlarida bu yo'q. Chrome'da o'lchadik: main ni grid qilgach, h1 va paragraf orasi 21 pikseldan 37 pikselga oshdi. Tuzatish: bolalar margin'ini nolga tushirib, oraliqni row-gap bilan bering.

8.4 Rasm ustida o'qilmaydigan matn

Oq matn rasmning och qismiga tushdi. Tuzatish: yarim shaffof qatlam yoki matn qutisiga fon.

8.5 Eski masonry yozuvi

Internetdan grid-template-rows: masonry ko'chirildi — ishlamaydi. Tuzatish: bugun columns + break-inside: avoid; grid-lanes ni esa Baseline holatini tekshirib qo'shing.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring: har mashqqa alohida papka, ichida index.html va asosiy.css.

1-mashq (oson): Tanlang

Har vazifa uchun flex yoki grid tanlang va bir gap bilan asoslang:

1. «Bahor» bron sahifasidagi "Orqaga" va "Band qilish" tugmalari bir qatorda, o'ng chetda.
2. Menyu sahifasidagi 12 ta taom kartasi, har qatorda 3 tadan.
3. Fotogalereya: 3 ustun, rasmlar har xil balandlikda, bo'sh joysiz.
4. Aksiya banneri: fon rasmi ustida "Chegirma 20%" yozuvi.

Ishora: "Flex yoki grid?" diagrammasidagi birinchi savol — "qatorlar ham, ustunlar ham tekis turishi kerakmi?"

2-mashq (o'rta): Ichimliklar ro'yxati

ul da 15 ta ichimlik nomi. Ro'yxat telefonda bitta, planshetda ikki, kompyuterda uch-to'rt ustunda tursin. Ustunlar orasida ingichka chiziq bo'lsin. Media query ishlatmang.

Ishora: multi-column jadvalidagi eng foydali qisqa yozuv. Chiziq — border kabi yoziladi.

ul {
  columns: 12rem;
  column-gap: 2rem;
  column-rule: 1px solid #c9d6cf;
}

li {
  break-inside: avoid;
}

3-mashq (qiyin): Hero'ni tuzating

Stajyor aksiya bannerini position bilan yozdi:

.aksiya {
  position: relative;
}

.aksiya svg {
  display: block;
  width: 100%;
  height: 10rem;
}

.aksiya p {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 1rem;
  color: #fff;
}

Telefonda uzun matn bannerdan pastga toshib, keyingi bo'lim ustiga chiqyapti. Matn manzara o'rtasida emas, tepasida turibdi. Kodni grid'ga o'tkazing: matn uzun bo'lsa banner o'ssin, manzara esa butun bannerni to'ldirsin. Matn banner o'rtasida tursin.

Ishora: «Ustma-ust qatlam» bo'limidagi hero va "Nega position: absolute emas?" qismi. SVG'ning balandligi endi qat'iy 10rem emas — kamida 10rem, ko'pi bilan katak balandligi.

.aksiya {
  display: grid;
}

.aksiya > * {
  grid-area: 1 / 1;
}

.aksiya svg {
  width: 100%;
  height: 100%;
  min-height: 10rem;
}

.aksiya p {
  place-self: center;
  margin: 0;
  padding: 1rem;
  color: #fff;
  text-align: center;
}

4-mashq: Portfolio qadami — kartalar matndan kengroq

Portfolioning loyihalar sahifasida matn ustuni 70ch, kartalar to'ri (.loyihalar) ham shu ustun ichida. Kompyuter ekranida kartalar tor, ikki chetda esa bo'sh joy ko'p.

1. Faqat .loyihalar bor sahifada main ni breakout to'rga aylantiring: matn — 70ch lik kontent ustunida, .loyihalar — har tarafdan 8rem gacha kengroq keng ustunida.
2. Boshqa sahifalar (bosh sahifa, aloqa, 404) o'zgarmasin.
3. Grid'da margin'lar birlashmaydi. Shu main ning bolalari margin'ini nolga tushiring, oraliqni 1.5rem qiling.

Ishora: "ichida .loyihalar bor main" — Mantiqiy pseudo-klasslar darsidagi :has(). Matematik funksiyalar va Margin sirlari darslaridagi header, main, footer { width: ...; margin-inline: auto; } qoidasi main ga en beradi. Breakout main da en butun sahifa bo'lishi kerak.

/* Loyihalar sahifasi: kartalar matndan kengroq (breakout) */
main:has(> .loyihalar) {
  display: grid;
  grid-template-columns:
    [toliq-start] minmax(1rem, 1fr)
    [keng-start] minmax(0, 8rem)
    [kontent-start] min(100% - 2rem, 70ch)
    [kontent-end] minmax(0, 8rem)
    [keng-end] minmax(1rem, 1fr) [toliq-end];
  row-gap: 1.5rem;
  width: auto;
}

main:has(> .loyihalar) > * {
  grid-column: kontent;
  margin-block: 0;
}

main > .loyihalar {
  grid-column: keng;
}

<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  header, main, footer {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h1 { color: #1f6f4a; }
  main:has(> .loyihalar) {
    display: grid;
    grid-template-columns:
      [toliq-start] minmax(1rem, 1fr)
      [keng-start] minmax(0, 8rem)
      [kontent-start] min(100% - 2rem, 70ch)
      [kontent-end] minmax(0, 8rem)
      [keng-end] minmax(1rem, 1fr) [toliq-end];
    row-gap: 1.5rem;
    width: auto;
  }
  main:has(> .loyihalar) > * {
    grid-column: kontent;
    margin-block: 0;
  }
  main > .loyihalar { grid-column: keng; }
  .loyihalar {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1.5rem;
  }
  .loyihalar > article {
    padding: 1rem;
    border: 1px solid #c9d6cf;
    border-radius: 0.5rem;
  }
  .loyihalar h2 { margin: 0; color: #1f6f4a; }
</style>
<header><p><a href="./">Aziz Karimov</a></p></header>
<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></article>
    <article><h2>Semantik blog maqolasi</h2></article>
  </div>
</main>

10. Real ishda

• Blog va yangiliklar saytlari full-bleed va breakout naqshini deyarli har maqolada ishlatadi: matn tor, katta rasm va videolar ekran eniga.
• Landing sahifalar (bitta mahsulotni tanishtiruvchi sahifa) hero bloksiz bo'lmaydi. Intervyuda "grid-area: 1 / 1 va position farqi nima?" deb so'rashadi: grid'da katak kontent bilan o'sadi, absolute esa oqimdan chiqadi.
• Masonry — Pinterest kabi galereyalar. Hozir JavaScript kutubxonalari yoki columns bilan qilinadi. grid-lanes Baseline bo'lgach, kod ancha soddalashadi.
• Kod review'da (jamoadoshlar kodingizni tekshirganda) "bu yerda nega grid?" deb so'rashadi. Javob: "ikki o'lcham" yoki "bir o'q, kontent o'lchamida".

Xulosa

• Full-bleed: [toliq-start] minmax(1rem, 1fr) [kontent-start] ... [kontent-end] ... [toliq-end], bolalar kontent da, kerakli elementlar toliq da.
• Breakout: yana bir juft chiziq — matndan kengroq, ekrandan torroq.
• grid-area: 1 / 1 — elementlar bitta katakda ustma-ust. Katak eng baland qatlamga moslashadi.
• Sidebar va holy grail — grid-template-columns / areas + katta ekran uchun @media. HTML tartibi ma'no tartibi bo'lib qoladi.
• Masonry: display: grid-lanes — spetsifikatsiya qoralamasida, Baseline emas (2026-yil sentabrda faqat Safari 26.4 da). Bugun — columns + break-inside: avoid.
• Bir o'qdagi kontent — flex, ikki o'lchamli layout — grid. Sahifada ikkalasi birga ishlaydi.

Keyingi dars: Responsive dizayn tamoyillari — bitta sayt telefon, planshet va kompyuterda qanday qulay bo'lishi va viewport meta tegi.

Manbalar

• MDN: "Grid lanes layout", "Realizing common layouts using grids", "Multiple-column layout", "break-inside" — developer.mozilla.org
• W3C: "CSS Grid Layout Module Level 3" (Editor's Draft) — drafts.csswg.org/css-grid-3
• W3C: "CSS Multi-column Layout Module Level 1" — w3.org/TR/css-multicol-1
• web.dev: "Learn CSS — Grid" va "Layout patterns" — web.dev/learn/css
• web-features: "Grid lanes", "Multi-column layout" — web-platform-dx.github.io/web-features