CSS Grid
Misollar va kod parchalari bilan CSS Grid asosida yaratilgan muqobil tartib tizimimizni qanday yoqish, ishlatish va sozlashni bilib oling.
Bootstrap-ning standart tarmoq tizimi millionlab odamlar tomonidan sinab ko'rilgan va sinovdan o'tgan o'n yillik CSS-ni joylashtirish texnikasining yakuniy natijasidir. Biroq, u yangi CSS Grid kabi brauzerlarda ko'rayotgan ko'plab zamonaviy CSS xususiyatlari va texnikasisiz yaratilgan.
U qanday ishlaydi
Bootstrap 5 bilan biz CSS Grid asosida qurilgan, lekin Bootstrap burilishi bilan alohida tarmoq tizimini yoqish imkoniyatini qo'shdik. Siz hali ham sezgir tartiblarni yaratish uchun injiqlik bilan murojaat qilishingiz mumkin bo'lgan darslarga ega bo'lasiz, ammo kaput ostida boshqacha yondashuv bilan.
-
CSS Grid ro'yxatdan o'tgan. O'rnatish orqali standart grid tizimini o'chiring va sozlash
$enable-grid-classes: false
orqali CSS Gridni yoqing$enable-cssgrid: true
. Keyin, Sass-ni qayta kompilyatsiya qiling. -
.row
ning misollarini bilan almashtiring.grid
. Sinf.grid
o'rnatadi va siz HTML yordamidadisplay: grid
yaratadigan sinfni yaratadi.grid-template
-
.col-*
Sinflarni sinflar bilan almashtiring.g-col-*
. Buning sababi, bizning CSS Grid ustunlarimizgrid-column
o'rniga xususiyatdan foydalanadiwidth
. -
Ustunlar va oluklar o'lchamlari CSS o'zgaruvchilari orqali o'rnatiladi. Bularni ota-onaga o'rnating
.grid
va xohlaganingizcha, ichki yoki uslublar jadvalida va bilan--bs-columns
sozlang--bs-gap
.
Kelajakda Bootstrap gibrid yechimga o'tadi, chunki gap
mulk flexbox uchun deyarli to'liq brauzerni qo'llab-quvvatladi.
Asosiy farqlar
Standart tarmoq tizimi bilan solishtirganda:
-
Flex yordam dasturlari CSS Grid ustunlariga xuddi shunday ta'sir qilmaydi.
-
Bo'shliqlar oluklarni almashtiradi. Xususiyat standart tarmoq tizimimizdan
gap
gorizontalni almashtiradi va shunga o'xshash funktsiyalarni bajaradi .padding
margin
-
Shunday qilib, s dan farqli o'laroq
.row
,.grid
s ning manfiy chekkalari yo'q va chekka yordam dasturlari panjara oluklarini o'zgartirish uchun ishlatilmaydi. Grid bo'shliqlari sukut bo'yicha gorizontal va vertikal ravishda qo'llaniladi. Batafsil ma'lumot uchun moslashtirish bo'limiga qarang . -
Inline va moslashtirilgan uslublar modifikator sinflarini almashtirish sifatida ko'rib chiqilishi kerak (masalan,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting xuddi shunday ishlaydi, lekin sizdan ichki o'rnatilgan ning har bir misolida ustunlar sonini tiklashni talab qilishi mumkin
.grid
. Tafsilotlar uchun joylashtirish bo'limiga qarang .
Misollar
Uch ustun
.g-col-4
Sinflar yordamida barcha ko'rish oynalari va qurilmalari bo'ylab uchta teng kenglikdagi ustunlar yaratilishi mumkin . Ko'rish oynasi o'lchami bo'yicha tartibni o'zgartirish uchun sezgir sinflarni qo'shing .
<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
Javobgar
Ko'rish oynalari bo'ylab tartibingizni sozlash uchun sezgir sinflardan foydalaning. Bu erda biz eng tor ko'rish oynalarida ikkita ustundan boshlaymiz, keyin esa o'rta va undan yuqori ko'rinishdagi uchta ustunga o'tamiz.
<div class="grid">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
Buni barcha ko'rish oynalaridagi ushbu ikkita ustun tartibi bilan solishtiring.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
O'rash
Gorizontal bo'sh joy qolmaganda, panjara elementlari avtomatik ravishda keyingi qatorga o'tadi. gap
To'r elementlari orasidagi gorizontal va vertikal bo'shliqlarga tegishli ekanligini unutmang .
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Boshlanadi
Boshlash darslari standart tarmoqdagi ofset sinflarini almashtirishga qaratilgan, ammo ular butunlay bir xil emas. CSS Grid brauzerlarga “ushbu ustundan boshlash” va “ushbu ustunda tugatish”ni aytadigan uslublar orqali panjara shablonini yaratadi. Bu xususiyatlar grid-column-start
va grid-column-end
. Boshlang'ich sinflar birinchisining qisqartmasi. Ustunlaringizni kerakli darajada kattalashtirish va tekislash uchun ularni ustun sinflari bilan bog'lang. Boshlash sinflari ushbu xususiyatlar uchun yaroqsiz qiymat 1
sifatida boshlanadi .0
<div class="grid">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
Avtomatik ustunlar
To'r elementlarida (a ning bevosita bolalari) sinflar bo'lmasa .grid
, har bir to'r elementi avtomatik ravishda bitta ustunga o'lchanadi.
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Ushbu xatti-harakatni panjara ustunlari sinflari bilan aralashtirish mumkin.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Uy qurish
Bizning standart tarmoq tizimimizga o'xshab, bizning CSS Grid .grid
s ni osongina joylashtirish imkonini beradi. Biroq, standartdan farqli o'laroq, bu panjara qatorlar, ustunlar va bo'shliqlardagi o'zgarishlarni meros qilib oladi. Quyidagi misolni ko'rib chiqing:
- Biz mahalliy CSS o'zgaruvchisi bilan standart ustunlar sonini bekor qilamiz:
--bs-columns: 3
. - Birinchi avtomatik ustunda ustunlar soni meros qilib olinadi va har bir ustun mavjud kenglikning uchdan bir qismini tashkil qiladi.
- Ikkinchi avtomatik ustunda biz o'rnatilgan ustunlar sonini
.grid
12 ga tikladik (bizning birlamchi). - Uchinchi avtomatik ustunda ichki tarkib yo'q.
Amalda, bu bizning standart tarmoq tizimimiz bilan solishtirganda yanada murakkab va moslashtirilgan tartiblarni yaratishga imkon beradi.
<div class="grid" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
Moslashtirish
Mahalliy CSS o'zgaruvchilari bilan ustunlar sonini, qatorlar sonini va bo'shliqlar kengligini moslashtiring.
O'zgaruvchan | Qayta qiymat | Tavsif |
---|---|---|
--bs-rows |
1 |
To'r shabloningizdagi qatorlar soni |
--bs-columns |
12 |
To'r shabloningizdagi ustunlar soni |
--bs-gap |
1.5rem |
Ustunlar orasidagi bo'shliqning o'lchami (vertikal va gorizontal) |
Ushbu CSS o'zgaruvchilari standart qiymatga ega emas; Buning o'rniga ular mahalliy namuna taqdim etilmaguncha ishlatiladigan zaxira qiymatlarni qo'llaydilar . Misol uchun, biz var(--bs-rows, 1)
CSS Grid qatorlarimiz uchun foydalanamiz, ular e'tiborga --bs-rows
olinmaydi, chunki u hali hech qaerda o'rnatilmagan. U bo'lgandan so'ng, .grid
misol zaxira qiymati o'rniga o'sha qiymatdan foydalanadi 1
.
Grid sinflari yo'q
Darhol bolalar elementlari .grid
to'r elementlari bo'lib, ular aniq .g-col
sinf qo'shmasdan o'lchanadi.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Ustunlar va bo'shliqlar
Ustunlar sonini va bo'shliqni sozlang.
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
Qator qo'shish
Ko'proq qatorlar qo'shish va ustunlar joylashuvini o'zgartirish:
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
Bo'shliqlar
Vertikal bo'shliqlarni faqat o'zgartirish orqali o'zgartiring row-gap
. E'tibor bering, biz s dan foydalanamiz gap
, .grid
lekin row-gap
va column-gap
kerak bo'lganda o'zgartirilishi mumkin.
<div class="grid" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Shu sababli, siz turli xil vertikal va gorizontal gap
s ga ega bo'lishingiz mumkin, ular bitta qiymatni (barcha tomonlar) yoki bir juft qiymatni (vertikal va gorizontal) olishi mumkin. Buni inline uslubi gap
bilan yoki bizning --bs-gap
CSS o'zgaruvchimiz bilan qo'llash mumkin.
<div class="grid" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Sass
CSS Gridning bir cheklovi shundaki, bizning standart sinflarimiz hali ham ikkita Sass o'zgaruvchisi tomonidan yaratilgan $grid-columns
va $grid-gutter-width
. Bu bizning tuzilgan CSS-da yaratilgan sinflar sonini samarali tarzda aniqlaydi. Bu yerda ikkita variantingiz bor:
- Ushbu standart Sass o'zgaruvchilarini o'zgartiring va CSS-ni qayta kompilyatsiya qiling.
- Taqdim etilgan sinflarni ko'paytirish uchun inline yoki maxsus uslublardan foydalaning.
Misol uchun, siz ustunlar sonini ko'paytirishingiz va bo'shliq hajmini o'zgartirishingiz mumkin, so'ngra "ustunlar" ni inline uslublari va oldindan belgilangan CSS Grid ustun sinflari aralashmasi bilan o'lchashingiz mumkin (masalan, .g-col-4
).
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>