Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Grid treklari

ULASHISH

CSS Grid yo‘naklari (qatorlar va ustunlar)

Grid konteyner ichida grid ustunlari va qatorlarining soni va o‘lchamini belgilaysiz.

Buning uchun quyidagi xossalardan foydalanamiz:

  • grid-template-columns — griddagi ustunlarning soni va kengligini belgilaydi
  • grid-template-rows — griddagi qatorlarning soni va balandligini belgilaydi
  • grid-template-areas — nomlangan grid elementlar yordamida ustunlar va qatorlarning ko‘rsatilishini belgilaydi

CSS grid-template-columns xossasi

grid-template-columns xossasi griddagi ustunlarning soni va kengligini belgilaydi.

Qiymat probel bilan ajratilgan ro‘yxat bo‘lib, har bir qiymat tegishli ustunning kengligini belgilaydi.

Keng tarqalgan qiymatlar:

  • Fixed lengths (100px 300px 200px)
  • Percentages (20% 60% 20%)
  • fr unit (1fr 2fr 1fr)
  • auto (auto auto auto)
  • repeat() (repeat(3, 1fr))
  • minmax() (minmax(80px, 1fr) 150px 150px)

CSS grid-template-columns: auto

Teng kenglikdagi 3 ustunli grid maketi yaratish uchun "auto" kalit so‘zidan foydalaning.

Misol

Teng kenglikdagi 3 ustunli grid yaratish:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Aralash kenglikdagi grid ustunlari

3 ustunli grid maketi yaratish: 2 ustun qat’iy kenglikda va 1 ustun "auto" o‘lchamda.

Misol

1 va 2 ustunlar uchun qat’iy o‘lchamli, 3 ustun esa auto o‘lchamli grid yaratish:

.container {
  display: grid;
  grid-template-columns: 80px 200px auto;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Eslatma: Agar 3 ustunli gridda 3 tadan ko‘p grid element bo‘lsa, grid ularni joylashtirish uchun yangi qatorlarni avtomatik qo‘shadi.

fr birligi bilan grid ustunlari

fr birligi "fraction" (ulush) degan ma’noni anglatadi. Bu birlik mavjud bo‘sh joyni avtomatik ulushlarga bo‘ladi.

1fr mavjud bo‘sh joyning 1 ulushini, 2fr esa 2 ulushini oladi.

Misol

Bu yerda har bir ustun konteyner kengligining 33.3% ini egallaydi — teng bo‘lib:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

Bu yerda ikkinchi ustun qolganlaridan ikki baravar katta bo‘ladi:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

repeat() funksiyasi bilan grid ustunlari

CSS repeat() funksiyasi gridda ustunlar yoki qatorlar to‘plamini takrorlash uchun ishlatiladi.

Misol

Gridda uchta teng kenglikdagi ustun yaratish uchun repeat() dan foydalaning:

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

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

minmax() funksiyasi bilan grid ustunlari

CSS minmax() funksiyasi min qiymatdan katta yoki teng, max qiymatdan kichik yoki teng o‘lcham oralig‘ini belgilash uchun ishlatiladi.

Misol

minmax() yordamida birinchi ustun kamida 80px kenglikda bo‘lishini va 1fr gacha o‘sishi mumkinligini belgilang:

.container {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 150px 150px;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

CSS grid-template-rows xossasi

grid-template-rows xossasi griddagi qatorlarning soni va balandligini belgilaydi.

Qiymat bo‘shliq bilan ajratilgan ro‘yxatdir, bu yerda har bir qiymat tegishli qatorning balandligini belgilaydi.

Keng tarqalgan qiymatlar:

  • Fixed lengths
  • Percentages
  • fr unit
  • auto
  • min-content
  • max-content
  • repeat()
  • minmax()
  • fit-content()

Misol

Griddagi birinchi qatorni 80px balandlikka, ikkinchi qatorni 200px balandlikka belgilash:

.container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Natija:

1
2
3
4
5
6
7
8

O‘zingiz sinab ko‘ring »

Yuqoridagi gridda birinchi qator 80px, ikkinchi qator 200px balandlikda ekaniga e’tibor bering. Keyingi qatorlar standart holda auto ni ishlatadi.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish