CSS Grid

Bootstrap-ning standart tarmoq tizimi millionlab odamlar tomonidan sinab ko'rilgan va sinovdan o'tgan o'n yillik CSS-ni joylashtirish usullarining 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: falseorqali CSS Gridni yoqing $enable-cssgrid: true. Keyin, Sass-ni qayta kompilyatsiya qiling.

• .rowning misollarini bilan almashtiring .grid. Sinf .grido'rnatadi va siz HTML yordamida display: gridyaratadigan sinfni yaratadi.grid-template

• .col-*Sinflarni sinflar bilan almashtiring .g-col-*. Buning sababi, bizning CSS Grid ustunlarimiz grid-columno'rniga xususiyatdan foydalanadi width.

• Ustunlar va oluklar o'lchamlari CSS o'zgaruvchilari orqali o'rnatiladi. Bularni ota-onaga o'rnating .gridva xohlaganingizcha, ichki yoki uslublar jadvalida va bilan --bs-columnssozlang --bs-gap.

Kelajakda Bootstrap gibrid yechimga o'tadi, chunki gapmulk 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 gapgorizontalni almashtiradi va shunga o'xshash funktsiyalarni bajaradi .paddingmargin

• Shunday qilib, s dan farqli o'laroq .row, .grids 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;"vs class="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-4Sinflar 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 text-center">
  <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 text-center">
  <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 text-center">
  <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. gapTo'r elementlari orasidagi gorizontal va vertikal bo'shliqlarga tegishli ekanligini unutmang .

<div class="grid text-center">
  <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-startva 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 1sifatida boshlanadi .0

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <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>

Yuvalash

Bizning standart tarmoq tizimimizga o'xshab, bizning CSS Grid .grids 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 .grid12 ga tikladik (bizning birlamchi).
• Uchinchi avtomatik ustunda ichki tarkib yo'q.

Amalda bu standart tarmoq tizimimiz bilan solishtirganda murakkabroq va moslashtirilgan tartiblarni yaratishga imkon beradi.

<div class="grid text-center" 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.

Ushbu CSS o'zgaruvchilari standart qiymatga ega emas; Buning o'rniga ular mahalliy misol taqdim etilgunga qadar ishlatiladigan zaxira qiymatlarni qo'llaydilar . Misol uchun, biz var(--bs-rows, 1)CSS Grid qatorlarimiz uchun foydalanamiz, ular e'tiborga --bs-rowsolinmaydi, chunki u hali hech qaerda o'rnatilmagan. Bu sodir bo'lgandan so'ng, .gridnamuna ning zaxira qiymati o'rniga o'sha qiymatdan foydalanadi 1.

Grid sinflari yo'q

Darhol bolalar elementlari to'r elementlari bo'lib , ular aniq sinf .gridqo'shmasdan o'lchamlari bo'ladi ..g-col

<div class="grid text-center" 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 text-center" 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 text-center" 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 text-center" 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, .gridlekin row-gapva column-gapkerak bo'lganda o'zgartirilishi mumkin.

<div class="grid text-center" 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 gaps ga ega bo'lishingiz mumkin, ular bitta qiymatni (barcha tomonlar) yoki bir juft qiymatni (vertikal va gorizontal) olishi mumkin. Buni inline uslubi gapbilan yoki bizning --bs-gapCSS o'zgaruvchimiz bilan qo'llash mumkin.

<div class="grid text-center" 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-columnsva $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 text-center" 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>