AXV

CSS Grid

Satr va ustunlardan iborat to'r — butun sahifa maketi

8-sinfWeb Full-stack5-hafta · 14-dars

Takrorlash

Elementni markazga qo'yish uchun konteynerga nima yoziladi?

«Oltin uchlik» + konteyner balandligi.
01

To'r tushunchasi

Ikki o'lcham: satr va ustun

Grid atamalari

ustun satr 1234chiziqlar

Flex — bir o'q, Grid — ikki o'q

Flexbox

Qator yoki ustun. Kontentdan: elementlar o'lchamiga qarab tiziladi.
VS

Grid

Satr va ustun. Maketdan: avval to'r, keyin elementlar.
02

Ustun va satrlar

grid-template, fr, repeat, gap

Birinchi to'r


.galereya {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Birinchi to'r


.galereya {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px 150px;
  gap: 16px;          /* eski nomi: grid-gap */
}

fr — bo'sh joy ulushi

grid-template-columns: 1fr 2fr 1fr 1fr 2fr 1fr 25% · 50% · 25% — gap hisobga olinadi, toshib ketmaydi

Yozuvlarni o'qing

repeat(4, 1fr)

bosing

4 ta teng ustun = 1fr 1fr 1fr 1fr

250px 1fr

bosing

Chap ustun qat'iy 250px, o'ng — qolgan hamma joy.

gap: 20px 10px

bosing

Satrlar orasi 20px, ustunlar orasi 10px.

Mini-test

grid-template-columns: 1fr 3fr — ikkinchi ustun qancha joy oladi?

1 + 3 = 4 ulush; ikkinchisi 3/4 = 75% (gap'dan keyingi joyning).
03

Cho'zish va tekislash

grid-column, grid-row, place-items

Elementni cho'zish


.katta { grid-column: 1 / 3; }   /* 2 ustun (1→3-chiziq) */
.uzun  { grid-row: 1 / 3; }      /* 2 satr */
.keng  { grid-column: span 2; }  /* joyidan 2 ustun */
.butun { grid-column: 1 / -1; }  /* butun kenglik */
1 / 3 — 3 ta emas, 2 ta ustun: raqamlar chiziqlarniki.

Katak ichida tekislash

XususiyatYo'nalish
justify-itemskatak ichida gorizontal
align-itemskatak ichida vertikal
place-itemsikkalasi birga

Qiymatlar: stretch (standart), start, center, end. Pastga bosing.

Bitta element uchun

justify-self

Faqat shu element — gorizontal.

align-self

Faqat shu element — vertikal.

04

Sahifa maketi

Grid + Flex birga

4 qismli maket

header sidebar main · 1fr footer

Kod


.sahifa { display: grid;
          grid-template-columns: 220px 1fr;
          grid-template-rows: 70px 1fr 60px;
          gap: 12px; min-height: 100vh; }
header, footer { grid-column: 1 / -1; }
header { display: flex; justify-content: space-between;
         align-items: center; }   /* ichida — Flex */

Grid yoki Flex?

  1. Menyu havolalari bir qatorda → Flex
  2. 3 × 3 galereya → Grid
  3. Header, sidebar, main, footer → Grid
  4. Karta ichida rasm va matn yonma-yon → Flex

Raqamlarda

0
Grid barcha brauzerlarda
0
o'lcham: satr + ustun
0
chiziq 3 ustunli to'rda

Amaliy topshiriqlar 30 daqiqa

Oson3 × 2 galereya: repeat(3, 1fr), gap: 16px.
O'rta1-rasm 2 ustun va 2 satrni egallasin.
QiyinHeader–sidebar–main–footer maketi, header ichida Flex menyu.

Dars xulosasi

To'r

display: grid, ustun va satrlar.

fr va repeat

Bo'sh joy ulushlari, gap.

Cho'zish

grid-column: 1 / -1, span 2.

Keyingi dars: Responsiv dizayn

Bitta sahifa — telefon, planshet va kompyuterda

5-hafta · 15-dars