CSS Grid

display:grid, fr, repeat va minmax, gap, grid-template-areas, auto-fit, Grid va Flexbox solishtiruvi

10-sinfAdvanced UX/UI6-hafta · 18-dars

Bugun nimalarni o'rganamiz?

Grid asoslari

Ustun va qatorlar

grid-template-areas

Sahifa maketi

Responsiv to'r

auto-fit va minmax

Takrorlash

Flexbox qaysi o'lchamli joylashuv uchun?

Flexbox bir vaqtda bitta o'q bilan ishlaydi.

Grid asoslari

Ustun va qatorlar

Grid to'ri

Uch ustunli to'r


.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

fr mavjud bo'sh joyni bo'ladi, gap hisobga olinadi. Qatorlar elementlar soniga qarab avtomatik qo'shiladi.

Mini-test

grid-template-columns: 1fr 2fr natijasi?

Bo'sh joyning 1/3 va 2/3 qismi.

grid-template-areas

Sahifa maketi

Maket xaritasi

Sahifa maketi


body {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Har qatordagi ustunlar soni bir xil bo'lishi kerak va nomlar to'rtburchak shakl hosil qilsin (L shakl mumkin emas).

Mini-test

Elementni nomlangan sohaga joylashtirish xossasi?

grid-area: nom.

Responsiv to'r

auto-fit va minmax

Responsiv to'r

Responsiv kartalar


.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.card.featured {
  grid-column: span 2;
}

auto-fit o'rniga auto-fill bo'sh ustunlarni saqlab qoladi; kartalar uchun odatda auto-fit qulayroq.

Mini-test

Media-so'rovsiz responsiv to'r uchun qaysi yozuv?

Ustunlar soni oyna kengligiga qarab o'zi o'zgaradi.

Flexbox va Grid

Flexbox

Bir o'lchamli: navbar, tugmalar qatori

Grid

Ikki o'lchamli: sahifa maketi, kartalar to'ri

Ko'pincha ikkalasi birga ishlatiladi.

Atamalar. Bosing

fr

bosing

Bo'sh joyning ulushi

minmax()

bosing

Eng kam va eng ko'p o'lcham

grid-area

bosing

Elementni nomlangan sohaga qo'yish

auto-fit

bosing

Sig'gancha ustun joylash

Sahifa maketi

1. Ustunlar

grid-template-columns.

2. Sohalar

grid-template-areas.

3. Moslang

auto-fit va media-so'rov.

Grid xossalari

Xossa	Vazifa	Misol
`grid-template-columns`	ustunlar	`repeat(3, 1fr)`
`gap`	oraliq	`16px`
`grid-template-areas`	maket xaritasi	`"header header"`
`grid-area`	soha nomi	`header`
`grid-column`	ustun yoyish	`span 2`

Pastga bosing: xossalar

Kartalar to'ri

Konteynerga display: grid bering.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) yozing.
Oynani torayting: ustunlar soni avtomatik kamayishini ko'ring.

Responsiv to'r


.cards { display: grid; grid-template-columns: repeat(3, 1fr); }

Responsiv to'r


.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

Grid raqamlarda

o'lchamli tizim: ustun va qator

ustunli grid — dizaynda keng tarqalgan

grid — oraliqlar uchun asos (qo'llanma)

Grid sahifa maketining asosiy vositasi.

Amaliy topshiriq 20 daqiqa

Oson3 ustun: Konteynerda 3 ta teng ustun va 16px oraliq yarating.

Osonfr hisobi: 1fr 3fr da ikkinchi ustun nechta marta keng?

O'rtaSidebar maket: Chap ustun 220px, o'ng ustun qolgan joyni olsin.

O'rtaAreas: header, sidebar, main, footer maketini areas bilan yozing.

QiyinResponsiv kartalar: Kartalar kamida 200px bo'lib, oynaga qarab ustun sonini o'zgartirsin.

BonusYoyilgan karta: Birinchi kartani 2 ustunga yoying.

Dars xulosasi

Asoslar

display: grid, fr, repeat(), gap.

Maket

grid-template-areas va grid-area.

Responsiv

auto-fit va minmax().

Uyga vazifa: CSS Grid sahifa maketi.

Keyingi dars: Responsiv dizayn

Media Queries, Mobile First

7-hafta · 19-dars