# Grid asoslari

> CSS Grid: ikki o'lchamli joylashuv tizimi. grid-template-columns, fr birligi, gap va elementni bir necha ustunga yoyish — sayt karkasi misolida.

Manba: https://learncode.uz/html-css/grid/
Sana: 2026-05-22

[Flexbox](https://learncode.uz/html-css/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

| | Flexbox | Grid |
|---|---|---|
| O'lcham | Bir (qator **yoki** ustun) | Ikki (qator **va** ustun) |
| Qulay joy | Menyu, tugmalar qatori | Sahifa tuzilishi, galereya |
| Yondashuv | Mazmun o'zi joy egallaydi | Panjara oldindan belgilanadi |

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:

```html
<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>
```

```css
.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;
  }
```

`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.

> **Atama**
>
> **Grid** — sahifani qator va ustunlardan iborat **panjaraga** bo'lib,
> elementlarni shu panjara kataklariga joylashtiradigan CSS tizimi. Jadvaldan
> farqi: panjara CSS'da tasvirlanadi, HTML tuzilishi o'zgarmaydi.

## `fr` — bo'sh joyni ulushga bo'lish

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

```html
<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>
```

```css
.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; }
```

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

> **Yodda tuting**
>
> `fr` foizdan qulayroq. `33.33%` yozsangiz, `gap` qo'shilgach jami 100% dan
> oshib ketadi va ustunlar sig'may qoladi. `1fr` esa `gap` ni hisobga olib,
> **qolgan** joyni bo'ladi.
>
> Uzoq so'z yoki katta rasm grid itemning minimal kengligini oshirishi mumkin.
> Content qisqarishi kerak bo'lgan ustunda `minmax(0, 1fr)` yoki itemga
> `min-width: 0` kutilmagan overflowni bartaraf etadi.

## `repeat()` — takrorlashni qisqartirish

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

```css
/* 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:

```html
<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>
```

```css
.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;
  }
```

`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:

```html
<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>
```

```css
.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; }
  }
```

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:

```html
<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>
```

```css
.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;
  }
```

`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.

> **Diqqat**
>
> Grid — joylashuv vositasi, jadval emas. Haqiqiy jadval ma'lumoti (narxlar,
> statistika) uchun [`<table>` tegini](https://learncode.uz/html-css/jadvallar) ishlating. Grid
> bilan yasalgan "jadval" ekran o'quvchilari uchun oddiy bloklar to'plami
> bo'lib qoladi.

## 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)](https://learncode.uz/html-css/pozitsiya) —
elementni odatiy oqimdan chiqarib, aniq joyga qo'yishni o'rganamiz.