CSS Grid'da tekislash: justify-items, align-self, place-content va stretch

Qisqacha: Grid'da tekislashning olti xususiyati bor: justify-* qator o'qi bo'ylab (gorizontal), align-* ustun o'qi bo'ylab (vertikal) ishlaydi. -items har elementni o'z katagi ichida, -self faqat bitta elementni, -content butun to'rni konteyner ichida siljitadi. Sukut bo'yicha element katakni to'liq egallaydi (stretch), place-items: center esa ikkala o'qda markazlaydi.

Bu darsda

• Olti xususiyatni "qaysi o'q, qaysi quti" jadvali bilan ajrata olasiz.
• stretch sukuti nega kartalarni teng qiladi va qachon ishlamasligini tushuntirasiz.
• Bitta elementni justify-self va align-self bilan joyiga qo'yasiz.
• justify-content nega fr bilan ishlamasligini bilasiz.
• place-* qisqa yozuvlarida qiymatlar tartibini adashtirmaysiz.

Oldin bilishingiz kerak: Grid'ga kirish, grid-template-areas, Flex'da tekislash, align-self va auto margin, Flex naqshlari va markazlash.

1. Nega bu kerak?

grid-template-areas darsida elementlarni kataklarga joylashni o'rgandik. Endi savol boshqa: element katakka tushdi, lekin katak ichida qayerda turadi?

«Bahor» menyusidagi taom kartasini grid qildik: sarlavha, tavsif va narx orasiga bir xil gap kerak edi. Natija:

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    display: grid;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  .taom-karta > * { margin: 0; }
  .narx {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background-color: #b4461a;
    color: #fff;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <p>Toshkentcha to'y oshi, bedana tuxumi bilan.</p>
  <span class="narx">35 000 so'm</span>
</article>

Nimaga qarang: narx yorlig'i butun karta eniga cho'zilib, uzun qizg'ish tasmaga aylandi. Grid'dan oldin span matn eniga teng kichik yorliq edi. Chrome'da o'lchadik: yorliq eni 256 piksel — kartaning butun ichki eni.

Hech narsa buzilmagan: grid elementni katakka cho'zadi — bu uning sukut xulqi. Yorliqni yana kichik qilish uchun uning katak ichidagi joyini o'zgartirish kerak — shu darsning mavzusi.

Choyxonadagi dasturxonni tasavvur qiling. Dasturxon — konteyner, undagi har bir tovoq o'rni — katak. Tovoqni o'z o'rnining o'rtasiga yoki chetiga qo'yish mumkin. Butun dasturxonni stolning o'rtasiga yoki chetiga surish ham mumkin. Grid'da ikkalasi uchun ham alohida xususiyat bor.

2. Olti xususiyat: ikki o'q, uch daraja

2.1 justify va align — qaysi o'q

Word'dagi "Justify" tugmasini eslang: u matnni qator bo'ylab, chapdan o'ngga tekislaydi. CSS'da ham justify-* — qator o'qi (inline axis) bo'ylab ishlaydi. O'zbek va ingliz matnida bu gorizontal yo'nalish. align-* esa ustun o'qi (block axis) bo'ylab ishlaydi — bloklar tepadan pastga ketadigan yo'nalish.

Flexbox'ga kirish darsida o'qlar flex-direction ga qarab aylanar edi. column yozsangiz, justify-content tik ishlay boshlardi. Grid'da bunday aylanish yo'q. Grid ikki o'lchamli: qatorlar ham, ustunlar ham bor. Shuning uchun justify doim qator o'qi, align doim ustun o'qi.

Diqqat: Ikkala gap ham rost: flex'da o'qlar aylanadi, grid'da aylanmaydi. Flex bitta asosiy o'qqa ega va justify o'sha o'qqa bog'langan. Grid'da asosiy o'q yo'q — ikkala o'q teng huquqli.

Nega "gorizontal" emas, "qator o'qi"? Mantiqiy xususiyatlar darsidagi vertikal yozuvda (writing-mode: vertical-rl) qator o'qi tik bo'ladi va justify ham tik ishlaydi. Oddiy o'zbek sahifasida esa justify — gorizontal, align — vertikal.

2.2 items, self, content — qaysi quti

Endi ikkinchi savol: nimani siljitamiz?

• -items — konteynerga yoziladi. Har bir elementni o'z katagi ichida siljitadi. Hamma elementga birdan.
• -self — elementning o'ziga yoziladi. Faqat shu elementni o'z katagi ichida siljitadi. Konteynerdagi -items ni bekor qiladi.
• -content — konteynerga yoziladi. Butun to'rni (hamma track'larni birgalikda) konteyner ichida siljitadi.

flowchart TD
  K["Grid konteyner"] --> I["-items<br/>har element katagida"]
  K --> C["-content<br/>butun to'r konteynerda"]
  E["Bitta element"] --> S["-self<br/>faqat o'zi, katagida"]
  S -. "ustun keladi" .-> I

Nimaga qarang: -items va -content ikkalasi ham konteynerga yoziladi, lekin boshqa-boshqa narsani siljitadi. -self elementga yoziladi va -items dan ustun keladi.

Ikki savolni birlashtirsak, olti xususiyat chiqadi:

Bu jadvalni yodlash shart emas. Ikki savolni bering: "qaysi o'q?" — justify yoki align. "Qaysi quti?" — items, self yoki content. Nom o'z-o'zidan yig'iladi.

Tekshirib ko'ring: Hamma kartalardagi narxni katagining o'ng chetiga surmoqchisiz. Qaysi xususiyat kerak va u kimga yoziladi?

3. justify-items va align-items — katak ichida

3.1 stretch — sukut qiymati

Ikkala xususiyatning sukut qiymati normal. Oddiy element uchun u stretch kabi ishlaydi: element katakni ikkala o'qda to'liq egallaydi. Narx yorlig'i shuning uchun cho'zildi.

Qiymatlarni ko'ramiz. Har bir kesik chiziqli quti — bitta katak, yashil yorliq — undagi element:

<style>
  section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    font: 14px system-ui, sans-serif;
  }
  div {
    display: grid;
    height: 5rem;
    border: 2px dashed #5b6660;
  }
  span {
    padding: 0.25rem;
    background-color: #2f6b3a;
    color: #fff;
  }
  /* 1-qator: qator o'qi (↔) */
  div:nth-child(2) { justify-items: start; }
  div:nth-child(3) { justify-items: center; }
  div:nth-child(4) { justify-items: end; }
  /* 2-qator: ustun o'qi (↕) */
  div:nth-child(6) { align-items: start; }
  div:nth-child(7) { align-items: center; }
  div:nth-child(8) { align-items: end; }
</style>
<section>
  <div><span>sukut</span></div>
  <div><span>start</span></div>
  <div><span>center</span></div>
  <div><span>end</span></div>
  <div><span>sukut</span></div>
  <div><span>start</span></div>
  <div><span>center</span></div>
  <div><span>end</span></div>
</section>

Nimaga qarang: birinchi ustundagi ikkala "sukut" yorlig'i butun katakni to'ldirdi. Yuqori qatorda justify-items o'zgardi: yorliq eni matnigacha qisqardi, balandligi esa katak bo'yicha qoldi. Pastki qatorda aksincha: align-items balandlikni qisqartirdi, en esa to'liq qoldi. Har bir o'q o'zicha ishlaydi.

Asosiy qiymatlar:

left va right ham bor (faqat justify-* da), lekin ular yozuv yo'nalishiga qaramaydi. start esa arabcha (o'ngdan chapga) sahifada o'ng tomonni bildiradi. Shuning uchun Mantiqiy xususiyatlar darsidagidek start / end ni tanlang.

3.2 stretch qachon ishlamaydi

stretch elementga o'lcham bermaydi — faqat "o'lchami berilmagan bo'lsa, katakni to'ldir" deydi. Uch holatda cho'zilish bo'lmaydi:

1. O'lcham qo'lda berilgan. Elementda width: 8rem bo'lsa, qator o'qida u 8rem qoladi. height bo'lsa — ustun o'qida.
2. Rasm. img ning o'z eni va bo'yi nisbati bor. Unda normal qiymati start kabi ishlaydi. Chrome'da tekshirdik: 300×200 piksellik katakdagi 100×50 lik rasm o'z o'lchamida, katakning chap yuqori burchagida qoldi. Aks holda rasm cho'zilib, buzilib ketardi.
3. Qiymat o'zgartirilgan. start, center, end — elementni kontent o'lchamiga qaytaradi.

Oxirgisi — eng ko'p uchraydigan tuzoq. align-items: center ni "chiroyli bo'lsin" deb kartalar to'riga yozsangiz, kartalar balandligi har xil bo'lib qoladi. Teng balandlik aynan stretch ning xizmati edi.

3.3 baseline — matnni bir chiziqqa

Menyu qatori: chapda taom nomi katta shriftda, o'ngda narx kichik shriftda. Ikkalasini tepaga (start) tekislasak:

<style>
  p {
    display: grid;
    grid-template-columns: 1fr auto;
    max-width: 20rem;
    margin: 0 0 1rem;
    font-family: system-ui, sans-serif;
    border-bottom: 1px dotted #5b6660;
  }
  p:first-child { align-items: start; }
  p:last-child { align-items: baseline; }
  .taom-nomi { font-size: 1.75rem; }
  .narx { color: #b4461a; }
</style>
<p>
  <span class="taom-nomi">Lag'mon</span>
  <span class="narx">28 000 so'm</span>
</p>
<p>
  <span class="taom-nomi">Lag'mon</span>
  <span class="narx">28 000 so'm</span>
</p>

Nimaga qarang: yuqori qatorda narx katta so'zning tepasida "osilib" turibdi. Pastki qatorda align-items: baseline — ikkala matn bitta chiziq ustida turibdi, xuddi daftar chizig'iga yozilgandek. Tayanch chiziq (baseline) — harflar "o'tiradigan" ko'rinmas chiziq. Qator balandligi darsida uni vertical-align bilan ko'rgan edik.

Tekshirib ko'ring: Grid konteynerda justify-items: center bor, elementlardan birida width: 100%. Bu element katak o'rtasida kichkina bo'lib turadimi?

4. justify-self va align-self — bitta element

4.1 Narx yorlig'ini tuzatamiz

Kartadagi hamma element cho'zilsa ham bo'ladi: sarlavha va tavsif uchun farqi yo'q. Faqat narx kichik bo'lishi kerak. Demak, justify-self — faqat narxga:

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    display: grid;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  .taom-karta > * { margin: 0; }
  .narx {
    justify-self: start;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background-color: #b4461a;
    color: #fff;
  }
  strong {
    justify-self: end;
    color: #2f6b3a;
  }
</style>
<article class="taom-karta yangi">
  <strong>Yangi</strong>
  <h3 class="taom-nomi">Tandir go'sht</h3>
  <p>Qo'y go'shti, tandirda uch soat pishiriladi.</p>
  <span class="narx">60 000 so'm</span>
</article>

Nimaga qarang: narx yana matni eniga teng yorliq bo'ldi va chap chetda turibdi. "Yangi" so'zi esa o'ng chetga surildi. Sarlavha va tavsif avvalgidek butun enni egallab turibdi — ularga hech narsa yozmadik. Bitta elementning -self qiymati konteynerdagi -items dan ustun keladi.

Chrome'da o'lchadik: yorliq eni 256 pikseldan 110 pikselga yaqin qiymatga tushdi.

4.2 align-self — rasm yonidagi matn

Endi ustun o'qi. «Bahor»ning bosh sahifasida chapda choynak rasmi, o'ngda ish vaqti matni. Rasm baland, matn qisqa:

<style>
  section {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    max-width: 22rem;
    font-family: system-ui, sans-serif;
  }
  p { margin: 0; align-self: center; }
</style>
<section>
  <svg viewBox="0 0 96 96" role="img" aria-label="Choynak">
    <rect width="96" height="96" rx="12" fill="#e8f1ec"/>
    <ellipse cx="46" cy="58" rx="26" ry="22" fill="#2f6b3a"/>
    <rect x="36" y="28" width="20" height="10" fill="#2f6b3a"/>
    <path d="M70 52 L88 40" stroke="#2f6b3a" stroke-width="6"/>
  </svg>
  <p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
</section>

Nimaga qarang: matn rasmning tepasida emas, aynan o'rtasi baravarida turibdi. align-self: center uni katak ichida vertikal markazga qo'ydi. Yozuvni o'chirib ko'ring ("Tahrirlab ko'rish"): matn katak tepasiga ko'tariladi. Aslida u baribir katak bo'ylab cho'zilgan, lekin matn doim o'z qutisining tepasidan boshlanadi.

align-self va auto margin darsida xuddi shu xususiyatni flex'da ko'rgansiz. Grid'da uning justify-self degan jufti ham bor — flex'da esa u yo'q (pastda, «Grid va flex» bo'limida).

4.3 Auto margin grid'da ham ishlaydi

Flex darsidagi margin-left: auto hiylasini eslang. Grid elementida ham auto margin katak ichidagi bo'sh joyni yutadi:

.narx {
  margin-inline-start: auto; /* = justify-self: end */
}

Natija justify-self: end bilan bir xil. Lekin grid'da -self aniqroq: kodni o'qigan odam darhol "bu tekislash" deb tushunadi.

Tekshirib ko'ring: Kartada justify-items: center yozilgan. Narxga justify-self: start yozdingiz. Narx qayerda turadi?

5. justify-content va align-content — butun to'r

5.1 Bo'sh joy bo'lsagina ishlaydi

-content katak ichini emas, butun to'rni siljitadi. Lekin buning uchun konteynerda to'rdan ortiqcha bo'sh joy bo'lishi kerak. Track'lar qat'iy o'lchamli bo'lsa, shunday joy qoladi:

<style>
  ul {
    display: grid;
    grid-template-columns: repeat(3, 5rem);
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem;
    list-style: none;
    border: 2px dashed #5b6660;
    font: 14px system-ui, sans-serif;
  }
  li {
    padding: 0.25rem;
    background-color: #2f6b3a;
    color: #fff;
  }
  ul:nth-of-type(2) { justify-content: center; }
  ul:nth-of-type(3) { justify-content: end; }
  ul:nth-of-type(4) { justify-content: space-between; }
</style>
<ul><li>sukut</li><li>Osh</li><li>Manti</li></ul>
<ul><li>center</li><li>Osh</li><li>Manti</li></ul>
<ul><li>end</li><li>Osh</li><li>Manti</li></ul>
<ul><li>between</li><li>Osh</li><li>Manti</li></ul>

Nimaga qarang: har qatorda uchta 5rem lik ustun bor. Sukutda to'r chap chetga yopishgan (start). center uni butunlay o'rtaga olib chiqdi, end — o'ng chetga. space-between esa ortiqcha joyni ustunlar orasiga bo'lib berdi. Ustunlarning o'z eni o'zgarmadi — faqat to'rning joyi o'zgardi.

Qiymatlar Flex'da tekislash darsidagi bilan bir xil: start, center, end, space-between, space-around, space-evenly, stretch. space-* qiymatlari ortiqcha joyni track'lar orasiga taqsimlaydi. Natijada gap kattalashgandek ko'rinadi.

5.2 fr bilan — hech narsa bo'lmaydi

Endi o'sha qoidani fr bilan yozamiz:

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center; /* ❌ hech narsa o'zgarmaydi */
}

Chrome'da tekshirdik: to'r joyidan qimirlamadi. Sababi Grid'ga kirish darsidan: fr — bo'sh joy ulushi. Uchta 1fr ustun konteynerdagi butun bo'sh joyni o'zaro bo'lib oladi. Siljitish uchun joy qolmadi.

Shuning uchun justify-content asosan qat'iy (5rem, 200px) yoki auto track'lar bilan ishlaydi. auto track'larda sukut qiymati (normal) stretch kabi ishlaydi — ortiqcha joy track'larga bo'lib beriladi. Boshqa qiymat yozsangiz, track'lar kontent o'lchamiga qaytadi.

5.3 align-content va "tarqalib ketgan" qatorlar

align-content uchun konteyner balandligi to'rdan katta bo'lishi kerak. Oddiy blok balandligi kontentga teng — siljitishga joy yo'q. Lekin shunday joy ko'pincha o'z-o'zidan paydo bo'ladi. Ikki karta yonma-yon turibdi, biri uzun:

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 30rem;
    margin-bottom: 1rem;
    font-family: system-ui, sans-serif;
  }
  .taom-karta {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 2px solid #2f6b3a;
  }
  .taom-karta > * { margin: 0; }
  section + section .taom-karta { align-content: start; }
  .narx { color: #b4461a; }
</style>
<section>
  <article class="taom-karta">
    <h3>Manti</h3>
    <p>Qovoqli</p>
    <span class="narx">30 000 so'm</span>
  </article>
  <article class="taom-karta">
    <h3>Osh</h3>
    <p>Toshkentcha to'y oshi: qo'y go'shti, sariq sabzi,
    no'xat, bedana tuxumi va qazi bilan.</p>
    <span class="narx">35 000 so'm</span>
  </article>
</section>
<section>
  <article class="taom-karta">
    <h3>Manti</h3>
    <p>Qovoqli</p>
    <span class="narx">30 000 so'm</span>
  </article>
  <article class="taom-karta">
    <h3>Osh</h3>
    <p>Toshkentcha to'y oshi: qo'y go'shti, sariq sabzi,
    no'xat, bedana tuxumi va qazi bilan.</p>
    <span class="narx">35 000 so'm</span>
  </article>
</section>

Nimaga qarang: ikki juftlik bir xil HTML. Yuqoridagi manti kartasida sarlavha, tavsif va narx bir-biridan uzoqlashib, karta bo'ylab tarqalib ketdi. Pastdagisida ular tepada, zich turibdi — pastki kartalarda align-content: start bor.

Nima bo'ldi? Buni qadamma-qadam ko'ramiz:

flowchart TD
  A["Osh kartasi uzun"] --> B["Tashqi qator balandligi =<br/>eng baland karta"]
  B --> C["Manti kartasi stretch<br/>bilan cho'zildi"]
  C --> D["Karta ichida ortiqcha<br/>balandlik paydo bo'ldi"]
  D --> E["align-content sukuti:<br/>joy auto qatorlarga bo'lindi"]
  E --> F["align-content: start —<br/>qatorlar tepaga yig'ildi"]

Karta ichidagi qatorlar — auto track'lar. align-content ning sukut qiymati ortiqcha joyni ularga bo'lib berdi, start esa qatorlarni kontent balandligiga qaytardi.

Maslahat: Grid karta ichida elementlar "tarqalib" ketsa — kartaga align-content: start yozing. Qo'shni kartalardagi sarlavha va narxlarni bir chiziqqa keltirish esa boshqa vazifa. Uni keyingi darsda subgrid hal qiladi.

5.4 safe — ma'lumot yo'qolmasin

Flex'da tekislash darsidagi safe kalit so'zi grid'da ham bor. To'r konteynerdan keng bo'lsa, justify-content: center uni ikki tomonga toshiradi. Chap tomonga toshgan qismga skroll bilan ham yetib bo'lmaydi. justify-content: safe center bunday holda to'rni start ga qaytaradi: toshgan qism o'ngda qoladi va skroll bilan ko'rinadi.

Tekshirib ko'ring: grid-template-columns: repeat(4, 1fr) va justify-content: space-between yozilgan. Ustunlar orasidagi masofa kattalashadimi?

6. place-* — qisqa yozuvlar

6.1 Uch qisqa yozuv

Har juftlikning qisqa yozuvi bor (CSS nima darsidagi shorthand):

Bitta qiymat — ikkala o'q uchun: place-items: center = align-items: center va justify-items: center. Markazlash usullari darsida ko'rgan eng qisqa markazlash aynan shu:

.yopiq {
  display: grid;
  place-items: center;
}

Bu yerda .yopiq — shunchaki sxema nomi.

6.2 Tartib tuzog'i: avval align

Ikki qiymat yozilsa, birinchisi — align (ustun o'qi), ikkinchisi — justify (qator o'qi). Nomning o'zi eslatadi: place-items = "align-items / justify-items" — alifbo tartibi.

<style>
  div {
    display: grid;
    place-items: end start;
    height: 6rem;
    max-width: 16rem;
    border: 2px dashed #5b6660;
    font-family: system-ui, sans-serif;
  }
  span {
    padding: 0.25rem 0.5rem;
    background-color: #2f6b3a;
    color: #fff;
  }
</style>
<div><span>end start</span></div>

Nimaga qarang: yorliq pastki chap burchakda. end — ustun o'qida oxiri (pastga), start — qator o'qida boshi (chapga). Ko'pchilik birinchi qiymatni "gorizontal" deb o'ylaydi va yorliqni pastki o'ngda kutadi. Koordinatalardagi (x, y) odati bu yerda adashtiradi.

6.3 Grid'siz vertikal markazlash

Ilgari matnni blok ichida vertikal markazlash uchun elementni grid yoki flex qilish shart edi. Endi align-content oddiy blokda ham ishlaydi:

<style>
  p {
    align-content: center;
    height: 6rem;
    max-width: 16rem;
    margin: 0;
    padding-inline: 1rem;
    background-color: #e8f1ec;
    font-family: system-ui, sans-serif;
  }
</style>
<p>Bugun ko'k choy — 5 000 so'm</p>

Nimaga qarang: display yozilmagan — p oddiy blok. Lekin matn 6rem lik qutining aynan o'rtasida. Bu imkoniyat yangi: Baseline ma'lumotiga ko'ra, 2024-yil apreldan beri hamma asosiy brauzerda ishlaydi (yangi Baseline). Eski brauzerda matn qutining tepasida qoladi — sahifa buzilmaydi.

Tekshirib ko'ring: place-self: center end qaysi burchakka yoki chetga suradi?

7. DevTools'da tekislashni sinash

Grid'ga kirish darsidagi grid belgisini bosing — to'r chiziqlari sahifa ustida chiziladi. Kataklar chegarasi ko'rinib turgani uchun -items va -content farqi darhol ko'rinadi.

Styles panelida display: grid qatori yonida kichik to'r ikonkasi bor. U tekislash muharririni ochadi: justify-content, align-content, justify-items va align-items uchun rasmli tugmalar. Qiymat nima qilishini bilmasangiz, shu yerda bosib ko'ring.

8. Grid va flex: bir xil nom, farqli ish

Nomlar flex'dan tanish, lekin hammasi ham flex'da ishlamaydi:

Chrome'da tekshirdik: flex konteynerdagi justify-items: center xato bermaydi, lekin elementlar joyidan qimirlamaydi. Nega? Flex'da elementlar asosiy o'qda bir-biriga tizilgan — "har element o'z katagida" degan narsa yo'q.

9. Ko'p uchraydigan xatolar

9.1 justify-content ishlamayapti

Ustunlar fr bilan berilgan. Ortiqcha joy yo'q — siljitadigan narsa yo'q. Tuzatish: qat'iy o'lchamli track'lar (repeat(3, 5rem)) yoki justify-items (katak ichida siljitish kerak bo'lsa).

9.2 Kartalar balandligi har xil bo'lib qoldi

Kartalar to'riga align-items: center yoki start yozilgan. stretch o'chdi — har karta kontent balandligiga qaytdi. Tuzatish: konteynerdan olib tashlang. Bitta elementni siljitish kerak bo'lsa — align-self ni faqat o'sha elementga yozing.

9.3 place-items: start end — kutilmagan burchak

Birinchi qiymat — align (vertikal), ikkinchisi — justify (gorizontal). Tuzatish: "a, keyin j" — alifbo tartibi. Shubha bo'lsa, ikkita to'liq yozuvga ajrating.

9.4 align-content hech narsa qilmayapti

Konteyner balandligi kontentga teng — ustun o'qida ortiqcha joy yo'q. Tuzatish: avval balandlik bering (min-height). Qo'shni karta tufayli cho'zilgan grid kartada esa joy bor — "tarqalib ketgan" qatorlar holati.

9.5 justify-self flex elementida ishlamayapti

Flex'da justify-self va justify-items yo'q. Tuzatish: flex'da bitta elementni asosiy o'qda surish uchun auto margin ishlating (align-self va auto margin).

10. Mashqlar

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

1-mashq (oson): «Yopiq» yozuvi

Jasur aka kechasi saytga "Hozir yopiqmiz" yozuvini qo'ymoqchi. main ichida bitta p:

<main>
  <p>Hozir yopiqmiz. Ertaga 7:00 da kutamiz!</p>
</main>

main 12rem balandlikda, och yashil (#e8f1ec) fonda bo'lsin. Paragraf main ning aynan o'rtasida tursin — gorizontal ham, vertikal ham. Bitta tekislash qatori bilan.

Ishora: place-* qisqa yozuvlaridan biri. main ni avval grid qiling.

main {
  display: grid;
  place-items: center;
  min-height: 12rem;
  background-color: #e8f1ec;
}

2-mashq (o'rta): Taom kartasi

Quyidagi karta berilgan. Karta grid, gap: 0.5rem.

<article class="taom-karta mashhur">
  <strong>Mashhur</strong>
  <h3 class="taom-nomi">Osh</h3>
  <p>Toshkentcha to'y oshi.</p>
  <span class="narx">35 000 so'm</span>
</article>

1. Narx — qizg'ish yorliq, eni matnigacha, o'ng chetda.
2. "Mashhur" yozuvi — eni matnigacha, o'rtada.
3. Sarlavha va tavsif — butun en bo'ylab (hech narsa yozmasdan).

Ishora: faqat -self xususiyatlari. 1-band — "qator o'qi, oxiri".

.taom-karta {
  display: grid;
  gap: 0.5rem;
  max-width: 16rem;
  padding: 1rem;
  border: 2px solid #2f6b3a;
}

.taom-karta > * {
  margin: 0;
}

.narx {
  justify-self: end;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  background-color: #b4461a;
  color: #fff;
}

.taom-karta strong {
  justify-self: center;
}

3-mashq (qiyin): Uchta sirli qator

Stajyor menyu to'rini yozdi va "tekislash ishlamayapti" deb shikoyat qildi:

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  place-items: start center;
}

Stajyor istagi: (a) har ustunda taom nomi o'rtada, (b) nomlar katak tepasida, (c) butun to'r sahifaning o'rtasida, uchala ustun 8rem enida.

1. Hozirgi kod (a) va (b) ni bajaryaptimi? place-items: start center nima qiladi?
2. (c) nega bajarilmayapti? Tuzating.

ul {
  display: grid;
  grid-template-columns: repeat(3, 8rem);
  justify-content: center;
  place-items: start center;
}

4-mashq: Portfolio qadami — aloqa formasida stretch

Joylashtirish darsida aloqa formasini to'rga aylantirgan edingiz. O'shanda tugmaga justify-self: start yozib, "buni keyin to'liq o'rganamiz" degandik. Endi har maydonning ichini ham grid qilamiz va eski "hiylalar"dan qutulamiz. Hozir asosiy.css da shu qoidalar bor:

/* box-sizing darsidan */
input:not([type="radio"]),
textarea {
  width: 100%;
  padding: 0.5em;
}

/* display darsidan */
p > label:first-child {
  display: block;
}

span[id$="-yordam"] {
  display: block;
  font-size: 0.875rem;
  color: var(--rang-ikkinchi);
}

1. Formaning bevosita bolasi bo'lgan har p ni grid qiling: yorliq, maydon va yo'riqnoma ustma-ust, oraliq 0.25rem.
2. Yuqoridagi ikki display: block qatorini o'chiring. Yorliq va yo'riqnoma o'z qatorida qoladimi?
3. width: 100% qatorini ham o'chiring. Maydonlar ustun enida qoladimi? Nega?
4. form > button { justify-self: start; } ni vaqtincha izohga oling. Nima o'zgardi? Keyin qaytaring.
5. fieldset ichidagi radio p lari (Flex'da tekislash darsidagi flex) o'zgarmasin.
6. Kompyuter enida "Ismingiz" va "Email" maydonlarini solishtiring. Bo'yi bir xilmi? Bo'lmasa — tuzating.

Ishora: form > p faqat bevosita bolalarni tanlaydi (Asosiy selektorlar) — radio p lari fieldset ning ichida. 3-band — "Olti xususiyat" jadvalidagi sukut qiymatni eslang. 6-band — "tarqalib ketgan" qatorlar.

/* Aloqa formasi: har maydon ichi ham to'r */
form > p {
  display: grid;
  align-content: start;
  gap: 0.25rem;
}

input:not([type="radio"]),
textarea {
  padding: 0.5em;
}

span[id$="-yordam"] {
  font-size: 0.875rem;
  color: var(--rang-ikkinchi);
}

<style>
  :root { --rang-ikkinchi: #5b6660; }
  *, *::before, *::after { box-sizing: border-box; }
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  main { width: min(100% - 2rem, 70ch); margin-inline: auto; }
  input, textarea, button { font: inherit; }
  input:not([type="radio"]), textarea { padding: 0.5em; }
  span[id$="-yordam"] {
    font-size: 0.875rem;
    color: var(--rang-ikkinchi);
  }
  fieldset { border: 1px solid #c9d6cf; border-radius: 0.5rem; }
  fieldset p { display: flex; align-items: center; gap: 0.5rem; }
  form {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 1rem;
  }
  form > p {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    margin: 0;
  }
  form > p:has(textarea), form > fieldset { grid-column: 1 / -1; }
  form > button { justify-self: start; }
</style>
<main>
  <form action="https://example.com/aloqa" method="post">
    <p>
      <label for="ism">Ismingiz</label>
      <input id="ism" name="ism" type="text" autocomplete="name">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email"
             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">
        <label for="mavzu-ish">Ish taklifi</label>
      </p>
    </fieldset>
    <p>
      <label for="xabar">Xabar</label>
      <textarea id="xabar" name="xabar" rows="3"></textarea>
    </p>
    <button type="submit">Yuborish</button>
  </form>
</main>

11. Real ishda

• Markazlash intervyusi. "Div'ni qanday markazga qo'yasiz?" savoliga bugungi eng qisqa javob — display: grid; place-items: center. Qo'shimcha savol: "place-items: start end nimani bildiradi?" — endi javob bera olasiz.
• Karta to'rlari. Deyarli har internet-do'kon va yangiliklar saytida kartalar teng balandlikda turadi. Bu stretch sukutining xizmati. Kimdir "chiroyli bo'lsin" deb align-items: center yozsa, kartalar zinapoya bo'lib qoladi — code review'da tez-tez uchraydigan xato.
• Dizayn. Figma (dizayn dasturi, kursda alohida o'rganamiz) da dizayner "hug" (kontentga teng) yoki "fill" (joyni to'ldir) ni tanlaydi. CSS'da "fill" — stretch, "hug" — start / center / end.
• Tailwind kabi CSS freymvorklarida bu xususiyatlarning qisqa class'lari bor (place-items-center, justify-self-end). Nomlarni bugun tushundingiz — u yerda yangi narsa bo'lmaydi.

Xulosa

• justify-* — qator o'qi (↔), align-* — ustun o'qi (↕). Grid'da o'qlar flex-direction kabi aylanmaydi.
• -items — konteynerga, har elementni katagida. -self — elementga, faqat o'zini. -content — konteynerga, butun to'rni.
• Sukut stretch: element katakni to'ldiradi. Qo'lda berilgan o'lcham va rasm cho'zilmaydi.
• -content faqat ortiqcha joy bo'lsa ishlaydi. fr track'lar bunday joy qoldirmaydi.
• place-* da birinchi qiymat — align, ikkinchisi — justify.
• Flex'da justify-items va justify-self e'tiborga olinmaydi.

Keyingi dars: subgrid — qo'shni kartalardagi sarlavha, tavsif va narxni bitta chiziqqa tekislashni o'rganamiz.

Manbalar

• MDN: "Box alignment in grid layout", "justify-items", "align-content", "place-items" — developer.mozilla.org
• W3C: "CSS Box Alignment Module Level 3" — w3.org/TR/css-align-3
• web.dev: "Learn CSS — Grid" (Alignment bo'limi) — web.dev/learn/css/grid
• web-features: "align-content in block layouts" — web-platform-dx.github.io/web-features