Grid asoslari

Flexbox elementlarni bir yo’nalish bo’ylab tizadi: yo qator, yo ustun. Ammo sahifa tuzilishi ko’pincha ikki o’lchamli bo’ladi — ham qator, ham ustun bir vaqtda kerak.

Shu vazifa uchun CSS Grid mavjud.

Bu dars yakunida grid konteyner va tracklarni yaratasiz, fr, repeat, minmax va gap bilan ustunlarni boshqarasiz, elementni bir nechta katakka yoyasiz hamda bir va ikki o’lchamli vazifada Grid yoki Flexbox tanlaysiz.

Grid va Flexbox farqi

Ular raqobatchi emas — ko’pincha birga ishlatiladi. Grid umumiy ikki o’lchamli tuzilmada, Flexbox esa bitta o’q bo’ylab tekislashda qulay. Lekin tanlov elementning katta yoki kichikligiga emas, layout vazifasiga bog’liq.

Birinchi panjara

Grid ham konteynerdan boshlanadi:

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

<style>
.panjara {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 8px;
  background: #f1f5f9;
  padding: 10px;
}
.e {
  background: #6d28d9;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>

grid-template-columns: 100px 100px 100px — uchta ustun, har biri 100px. Oltita element o’zi ikki qatorga bo’lindi: qator sonini ko’rsatish shart emas. Qattiq 100px ustunlar tor konteynerda sig’masligi mumkin; real layoutda moslashuvchan fr, minmax yoki media query kerak bo’lishini unutmang.

fr — bo’sh joyni ulushga bo’lish

Grid’ning eng foydali jihati — maxsus fr birligi. U qolgan bo’sh joyni ulushlarga taqsimlaydi:

<p>1fr 1fr 1fr — teng uch ustun</p>
<div class="p" style="grid-template-columns: 1fr 1fr 1fr">
  <div class="e">1</div><div class="e">2</div><div class="e">3</div>
</div>

<p>2fr 1fr — birinchisi ikki barobar</p>
<div class="p" style="grid-template-columns: 2fr 1fr">
  <div class="e">2fr</div><div class="e">1fr</div>
</div>

<p>200px 1fr — chapda aniq, o'ngda qolgani</p>
<div class="p" style="grid-template-columns: 200px 1fr">
  <div class="e">200px</div><div class="e">1fr</div>
</div>

<style>
.p {
  display: grid;
  gap: 8px;
  background: #f1f5f9;
  padding: 8px;
  margin-bottom: 8px;
}
.e {
  background: #6d28d9;
  color: white;
  padding: 16px;
  text-align: center;
  border-radius: 4px;
  font-family: sans-serif;
}
p { margin: 8px 0 2px; font-family: sans-serif; font-size: 13px; }
</style>

Oxirgi misol ayniqsa amaliy: 200px 1fr — chapda qat’iy kenglikdagi yon panel, o’ngda esa qolgan hamma joyni egallaydigan asosiy qism.

repeat() — takrorlashni qisqartirish

O’nta teng ustun kerak bo’lsa, 1fr ni o’n marta yozish noqulay:

/* Uzun */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* Qisqa — bir xil natija */
grid-template-columns: repeat(4, 1fr);

Elementni yoyish — grid-column

Ba’zi elementlar bir nechta katakni egallashi kerak bo’ladi:

<div class="p">
  <div class="e keng">Bu element 3 ustunni egallaydi</div>
  <div class="e">1</div>
  <div class="e">2</div>
  <div class="e">3</div>
</div>

<style>
.p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #f1f5f9;
  padding: 10px;
}
.e {
  background: #6d28d9;
  color: white;
  padding: 18px;
  text-align: center;
  border-radius: 4px;
  font-family: sans-serif;
}
.keng {
  grid-column: span 3;
  background: #6d28d9;
}
</style>

grid-column: span 3 — “uch ustun bo’ylab cho’zil” degani.

Amaliy misol: sahifa tuzilishi

Grid eng ko’p qo’llanadigan joy — saytning umumiy karkasi:

<div class="sayt">
  <header class="bosh">Sarlavha</header>
  <aside class="yon">Yon menyu</aside>
  <main class="asosiy">Asosiy mazmun</main>
  <footer class="past">Pastki qism</footer>
</div>

<style>
.sayt {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  font-family: sans-serif;
  font-size: 14px;
}
.bosh, .past {
  grid-column: span 2;
  background: #1e293b;
  color: white;
  padding: 14px;
  border-radius: 4px;
}
.yon {
  background: #e0e7ff;
  padding: 14px;
  border-radius: 4px;
  min-height: 90px;
}
.asosiy {
  background: #f1f5f9;
  padding: 14px;
  border-radius: 4px;
  min-width: 0;
}
@media (max-width: 520px) {
  .sayt { grid-template-columns: 1fr; }
  .bosh, .past { grid-column: 1; }
}
</style>

Sarlavha va pastki qism ikki ustunni egalladi, o’rtada esa yon menyu bilan asosiy mazmun yonma-yon turibdi. Bu — deyarli har saytda uchraydigan tuzilish.

Galereya — auto-fit

Rasmlar galereyasi uchun juda foydali usul bor:

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

<style>
.galereya {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  background: #f1f5f9;
  padding: 10px;
}
.rasm {
  background: #6d28d9;
  color: white;
  padding: 26px;
  text-align: center;
  border-radius: 4px;
  font-family: sans-serif;
}
</style>

repeat(auto-fit, minmax(110px, 1fr)) shuni bildiradi: “har ustun kamida 110px bo’lsin, sig’gancha ustun yasa, qolgan joyni teng bo’l”. Natijada oyna kengligi o’zgarganda ustunlar soni o’zi moslashadi — bitta ham media query yozmasdan.

Amaliy mashq

Avval repeat(2, 1fr) bilan ikki ustunli grid yarating, bitta elementni grid-column: 1 / -1 bilan barcha ustunga yoying. Keyin ustunlarni repeat(auto-fit, minmax(180px, 1fr)) ga almashtirib, brauzer kengligini DevTools orqali o’zgartiring. Qaysi holatda media querysiz moslashganini yozing.

Qisqacha xulosa

• Grid — ikki o’lchamli joylashuv: qator va ustun bir vaqtda.
• Konteynerga display: grid va grid-template-columns beriladi.
• fr — qolgan bo’sh joyni ulushga bo’ladi, foizdan ishonchliroq.
• repeat(3, 1fr) — takrorlanadigan ustunlarni qisqa yozish.
• grid-column: span 2 — elementni bir necha ustunga yoyish.
• repeat(auto-fit, minmax(...)) — o’zi moslashadigan galereya.
• Grid va Flexboxni element o’lchamiga emas, bir yoki ikki o’qli layout ehtiyojiga qarab tanlang.

Keyingi darsda pozitsiya (position, z-index) — elementni odatiy oqimdan chiqarib, aniq joyga qo’yishni o’rganamiz.