Grid va moslashuvchan dizayn

Flexbox elementlarni bitta yo'nalish bo'yicha teradi. Lekin rasm galereyasi yoki butun sahifaning skeleti kabi joylarda qatorlar va ustunlar birga kerak. Buning uchun CSS Grid bor. Darsning ikkinchi yarmida esa sahifani telefon, planshet va kompyuterga moslashtirishni o'rganamiz — chunki bugun saytlarga kiruvchilarning ko'pchiligi telefondan kiradi.

Grid — katak daftar kabi setka

CSS Grid (inglizcha grid — «setka», «panjara») — elementlarni ikki yo'nalishda, ya'ni qatorlar va ustunlar bo'yicha joylashtirish usuli. Flexbox'dagi kabi, bu yerda ham konteyner (display: grid) va uning elementlari bor.

<style>
  body { font-family: sans-serif; }
  .setka {
    display: grid;
    grid-template-columns: 150px 150px 150px;
    gap: 10px;
  }
  .setka div { background: #4f8ef7; color: white; padding: 20px;
               text-align: center; border-radius: 8px; font-weight: bold; }
</style>

<div class="setka">
  <div>1</div> <div>2</div> <div>3</div>
  <div>4</div> <div>5</div> <div>6</div>
</div>

grid-template-columns («setka ustunlari qolipi») ustunlar sonini va kengligini belgilaydi: uchta qiymat — uchta ustun. Elementlar chapdan o'ngga terilib, qator to'lgach keyingi qatorga o'tadi. Qatorlar soni esa o'zi hisoblanadi. Sinab ko'ring: yana ikkita <div> qo'shing yoki to'rtinchi ustun uchun 150px yozing.

fr birligi va repeat()

Ustunlarni px da bersak, oyna kengayib-torayganda ular o'zgarmaydi. Grid'ning maxsus birligi — fr (inglizcha fraction — «ulush»): u bo'sh joyni ulushlarga bo'ladi. 1fr 1fr 1fr — uchta teng ustun, 2fr 1fr — birinchisi ikkinchisidan ikki baravar keng.

<style>
  body { font-family: sans-serif; font-size: 14px; }
  .setka { display: grid; gap: 6px; margin-bottom: 14px; }
  .setka div { background: #2bb673; color: white; padding: 10px;
               border-radius: 6px; text-align: center; }
  .a { grid-template-columns: 1fr 1fr 1fr; }
  .b { grid-template-columns: 2fr 1fr; }
  .c { grid-template-columns: 150px 1fr; }
  .d { grid-template-columns: repeat(4, 1fr); }
</style>

<div class="setka a"><div>1fr</div> <div>1fr</div> <div>1fr</div></div>
<div class="setka b"><div>2fr</div> <div>1fr</div></div>
<div class="setka c"><div>150px</div> <div>1fr — qolgan joy</div></div>
<div class="setka d">
  <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>

Elementni bir necha katakka cho'zish

Elementga grid-column: span 2; yozilsa, u ikkita ustunni egallaydi, grid-row: span 2; esa — ikkita qatorni. Bu xususiyatlar konteynerga emas, elementning o'ziga yoziladi. Quyida bitta katta rasmli galereya:

<style>
  .galereya {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 120px;   /* har bir qator balandligi */
    gap: 8px;
  }
  .galereya img { display: block; width: 100%; height: 100%;
                  object-fit: cover; border-radius: 8px; }
  .katta { grid-column: span 2; grid-row: span 2; }
</style>

<div class="galereya">
  <img class="katta" src="../assets/rasmlar/registon.svg" alt="Registon">
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
  <img src="../assets/rasmlar/olma.svg" alt="Olma">
  <img src="../assets/rasmlar/avatar.svg" alt="Avatar">
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
  <img src="../assets/rasmlar/olma.svg" alt="Olma">
</div>

Registon rasmi 2 ustun va 2 qatorni egalladi, qolgan rasmlar bo'sh kataklarga o'zi joylashdi. grid-auto-rows: 120px har bir qatorning balandligini belgilaydi. .katta klassini boshqa rasmga ko'chirib ko'ring.

auto-fit va minmax() — o'zi moslashadigan setka

Endi Grid'ning eng ajoyib «sehrli qatori»:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Uni qismlarga bo'lib o'qiymiz:

• minmax(150px, 1fr) — har bir ustun kamida 150px, ko'pi bilan bo'sh joyning teng ulushi.
• auto-fit — ustunlar sonini o'zing hisobla: «nechta sig'sa, shuncha ustun qil».

Natijada keng ekranda ustunlar ko'p, tor ekranda kam bo'ladi — bitta qator CSS bilan!

<style>
  body { font-family: sans-serif; }
  .kartalar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  .karta { background: #dcf1ef; color: #0b6e63; padding: 16px;
           border-radius: 10px; }
  .karta b { display: block; font-size: 20px; }
</style>

<div class="kartalar">
  <div class="karta"><b>Olma</b>12 000 so'm</div>
  <div class="karta"><b>Uzum</b>18 000 so'm</div>
  <div class="karta"><b>Anor</b>25 000 so'm</div>
  <div class="karta"><b>Behi</b>15 000 so'm</div>
  <div class="karta"><b>O'rik</b>20 000 so'm</div>
  <div class="karta"><b>Shaftoli</b>22 000 so'm</div>
  <div class="karta"><b>Qovun</b>30 000 so'm</div>
  <div class="karta"><b>Tarvuz</b>35 000 so'm</div>
</div>

Sahifa skeleti: grid-template-areas

Grid butun sahifani qurish uchun ham qulay. grid-template-areas («setka hududlari») yordamida sahifaning «xaritasini» so'zlar bilan chizasiz: har bir qo'shtirnoq — bitta qator, har bir so'z — bitta katak. Bir xil so'z takrorlansa, element shu kataklarning hammasini egallaydi.

<style>
  body { font-family: sans-serif; margin: 0; }
  .sahifa {
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-areas:
      "bosh  bosh"
      "yon   asosiy"
      "past  past";
    gap: 8px;
  }
  header { grid-area: bosh;   background: #1f2a44; color: white; }
  aside  { grid-area: yon;    background: #fde7c4; }
  main   { grid-area: asosiy; background: #d7ecff; min-height: 120px; }
  footer { grid-area: past;   background: #dcf1ef; }
  header, aside, main, footer { padding: 14px; }
</style>

<div class="sahifa">
  <header>Sarlavha (header)</header>
  <aside>Yon panel</aside>
  <main>Asosiy mazmun</main>
  <footer>Pastki qism (footer)</footer>
</div>

Har bir element grid-area: nom; bilan o'z hududiga joylashdi. Xaritada "yon asosiy" ni "asosiy yon" ga almashtirib ko'ring — yon panel o'ngga o'tadi, HTML'ga esa tegmadik!

Grid yoki Flexbox?

Ikkalasi ham elementlarni joylashtiradi, lekin har birining o'z «mutaxassisligi» bor:

Moslashuvchan dizayn

Dunyo bo'yicha saytlarga kirishlarning yarmidan ko'pi telefondan bo'ladi. Telefon ekrani esa kompyuternikidan 3–4 baravar tor. Kompyuterda chiroyli ko'ringan uch ustunli sahifa telefonda mayda va o'qib bo'lmaydigan bo'lib qolishi mumkin.

Moslashuvchan dizayn (inglizcha responsive design) — bitta sahifa har qanday ekranda: telefon, planshet va kompyuterda qulay ko'rinishi. Buning uchun beshta vosita bor.

1. viewport meta tegi

Uni birinchi sahifa qolipida ko'rgansiz — VS Code'da ! + Tab uni o'zi qo'shadi:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu teg bo'lmasa, telefon brauzeri ekranni taxminan 980px keng deb «o'ylaydi» va sahifani shu kenglikda chizib, keyin kichraytirib ko'rsatadi — matn juda mayda bo'lib qoladi. width=device-width — «sahifa kengligi qurilma ekrani kengligiga teng», initial-scale=1.0 — «boshlang'ich masshtab 100%». Bu tegsiz media so'rovlar ham to'g'ri ishlamaydi, shuning uchun uni har doim yozing.

2. Nisbiy birliklar

Qat'iy px o'rniga ekranga yoki shriftga bog'liq birliklar ishlatilsa, sahifa o'zi moslashadi:

Yana bir muhim odat: matn joylashgan konteynerga width emas, max-width bering. Shunda keng ekranda qatorlar haddan tashqari uzun bo'lmaydi, tor ekranda esa konteyner o'zi torayadi:

.konteyner {
  max-width: 960px;   /* 960px dan kengaymaydi */
  margin: 0 auto;     /* o'rtada turadi */
  padding: 0 16px;    /* telefonda matn chetga yopishmaydi */
}

3. Rasmlar: max-width: 100%

Rasm o'zining haqiqiy o'lchamida ko'rsatiladi. Tog' rasmimiz 640px keng — tor konteynerga sig'maydi va chetdan chiqib ketadi. Yechim — bitta qoida:

<style>
  body { font-family: sans-serif; font-size: 14px; }
  .quti { width: 260px; border: 2px dashed #9db4d8; padding: 6px;
          margin-bottom: 12px; }
  .moslashuvchan { max-width: 100%; height: auto; }
</style>

<div class="quti">
  max-width: 100% — qutiga sig'di:
  <img class="moslashuvchan" src="../assets/rasmlar/tog.svg" alt="Tog'lar">
</div>

<div class="quti">
  Oddiy rasm — qutidan chiqib ketdi:
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
</div>

max-width: 100% — «rasm otasidan keng bo'lmasin», height: auto — «bo'yi eniga mos ravishda o'zgarsin, rasm cho'zilib ketmasin». Ko'p dasturchilar buni har bir loyihada barcha rasmlar uchun yozib qo'yadi: img { max-width: 100%; height: auto; }.

4. Media so'rovlar

Media so'rov (inglizcha media query) — «agar ekran shunday bo'lsa, mana bu qoidalarni ham qo'lla» degan shart. U @media bilan yoziladi:

<style>
  body { font-family: sans-serif; background: #d7ecff; }
  .kartalar { display: grid; grid-template-columns: repeat(3, 1fr);
              gap: 10px; }
  .karta { background: white; padding: 16px; border-radius: 8px; }
  .telefonda { display: none; }

  /* Ekran 600px yoki undan tor bo'lsa: */
  @media (max-width: 600px) {
    body { background: #fde7c4; }
    .kartalar { grid-template-columns: 1fr; }
    .telefonda { display: block; }
    .kompyuterda { display: none; }
  }
</style>

<p class="kompyuterda">Keng ekran: kartalar 3 ustunda, fon ko'k.</p>
<p class="telefonda">Tor ekran: kartalar 1 ustunda, fon sariq.</p>
<div class="kartalar">
  <div class="karta">1-karta</div>
  <div class="karta">2-karta</div>
  <div class="karta">3-karta</div>
</div>

Natija oynasi muharrir kengligida (taxminan 700px), shuning uchun hozir «keng ekran» ko'rinishi chiqyapti. Tor ekran ko'rinishini ko'rishning uch yo'li bor:

1. Koddagi 600px ni 900px ga o'zgartiring — shart darhol bajariladi.
2. «Yangi oynada» tugmasini bosib, oynani 600px dan torroq qiling.
3. Bu sahifani telefoningizda oching — u yerda tor ko'rinish o'zi chiqadi.

Media so'rov ichida oddiy CSS qoidalari yoziladi. Ular faqat shart bajarilganda ishlaydi va yuqoridagi qoidalarni ustidan yozadi. Shuning uchun @media bloklari odatda CSS faylning oxirida turadi.

5. Avval telefon (mobile-first)

Professional dasturchilar ko'pincha «avval telefon» (inglizcha mobile-first) yondashuvidan foydalanadi: asosiy CSS telefon uchun yoziladi (odatda bitta ustun — eng sodda holat), kattaroq ekranlar uchun esa min-width media so'rovlari bilan qo'shimchalar kiritiladi. Narsa qo'shish olib tashlashdan osonroq, shuning uchun kod sodda va tartibli bo'ladi.

<style>
  body { font-family: sans-serif; }
  /* 1. Asosiy uslub — telefon uchun: bitta ustun */
  .setka { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .setka div { background: #4f8ef7; color: white; padding: 18px;
               border-radius: 8px; text-align: center; }

  /* 2. Planshet va undan katta: ikki ustun */
  @media (min-width: 768px) {
    .setka { grid-template-columns: repeat(2, 1fr); }
  }

  /* 3. Kompyuter: to'rt ustun */
  @media (min-width: 1024px) {
    .setka { grid-template-columns: repeat(4, 1fr); }
  }
</style>

<div class="setka">
  <div>A</div> <div>B</div> <div>C</div> <div>D</div>
</div>

Natija oynasi 768px dan tor bo'lgani uchun bu yerda bitta ustun ko'rinyapti. «Yangi oynada» ochib, oynani asta-sekin kengaytiring: avval 2, keyin 4 ustun paydo bo'ladi.

Media so'rovlar uchun ko'p ishlatiladigan kengliklar (to'xtash nuqtalari, inglizcha breakpoints):

DevTools'da telefon ko'rinishini sinash

Sahifani telefonda qanday ko'rinishini tekshirish uchun telefon shart emas. Brauzerning dasturchi vositalarida maxsus qurilma rejimi (device mode) bor:

1. Sahifani Chrome yoki Edge'da oching va F12 ni bosing.
2. Ctrl + Shift + M ni bosing (macOS'da Cmd + Shift + M) yoki DevTools'ning chap yuqori burchagidagi telefon-planshet belgisini bosing.
3. Yuqoridagi ro'yxatdan qurilmani tanlang (masalan, iPhone SE yoki Samsung Galaxy) yoki Responsive rejimida sahifa chetini tortib, kenglikni o'zgartiring.
4. Sahifani har xil kengliklarda ko'rib chiqing: hamma narsa sig'yaptimi, matn o'qiladimi, tugmalarni barmoq bilan bosish qulaymi?

Mashqlar

<style>
  .galereya {
    /* shu yerga yozing */
  }
  .galereya img { display: block; width: 100%; height: 110px;
                  object-fit: cover; border-radius: 8px; }
</style>

<div class="galereya">
  <img src="../assets/rasmlar/registon.svg" alt="Registon">
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
  <img src="../assets/rasmlar/olma.svg" alt="Olma">
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
  <img src="../assets/rasmlar/olma.svg" alt="Olma">
  <img src="../assets/rasmlar/registon.svg" alt="Registon">
</div>

<style>
  .galereya {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .galereya img { display: block; width: 100%; height: 110px;
                  object-fit: cover; border-radius: 8px; }
</style>

<div class="galereya">
  <img src="../assets/rasmlar/registon.svg" alt="Registon">
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
  <img src="../assets/rasmlar/olma.svg" alt="Olma">
  <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
  <img src="../assets/rasmlar/olma.svg" alt="Olma">
  <img src="../assets/rasmlar/registon.svg" alt="Registon">
</div>

<style>
  body { font-family: sans-serif; margin: 0; }
  .menyu { display: flex; gap: 8px; padding: 10px; background: #1f2a44; }
  .menyu a { color: white; text-decoration: none; padding: 8px 12px;
             background: #33415f; border-radius: 6px; }

  /* media so'rovni shu yerga yozing */
</style>

<nav class="menyu">
  <a href="#">Bosh sahifa</a>
  <a href="#">Yangiliklar</a>
  <a href="#">Aloqa</a>
</nav>

<style>
  body { font-family: sans-serif; margin: 0; }
  .menyu { display: flex; gap: 8px; padding: 10px; background: #1f2a44; }
  .menyu a { color: white; text-decoration: none; padding: 8px 12px;
             background: #33415f; border-radius: 6px; }

  @media (max-width: 500px) {
    .menyu { flex-direction: column; }
  }
</style>

<nav class="menyu">
  <a href="#">Bosh sahifa</a>
  <a href="#">Yangiliklar</a>
  <a href="#">Aloqa</a>
</nav>

O'zingizni sinang