CSS мрежа

Мрежовата система по подразбиране на Bootstrap представлява кулминацията на повече от десетилетие техники за CSS оформление, изпробвани и тествани от милиони хора. Но също така е създаден без много от съвременните CSS функции и техники, които виждаме в браузъри като новата CSS Grid.

Как работи

С Bootstrap 5 добавихме опцията за активиране на отделна мрежова система, която е изградена върху CSS Grid, но с обрат на Bootstrap. Все още получавате класове, които можете да приложите по прищявка, за да създадете отзивчиви оформления, но с различен подход под капака.

• CSS Grid е включен. Деактивирайте мрежовата система по подразбиране чрез настройка $enable-grid-classes: falseи активирайте CSS мрежата чрез настройка $enable-cssgrid: true. След това прекомпилирайте вашия Sass.

• Заменете екземплярите на .rowс .grid. Класът .gridзадава display: gridи създава grid-template, върху който надграждате с вашия HTML.

• Заменете .col-*класовете с .g-col-*класове. Това е така, защото нашите CSS Grid колони използват grid-columnсвойството вместо width.

• Размерите на колоните и каналите се задават чрез CSS променливи. Задайте ги на родителя .gridи персонализирайте, както искате, вградени или в таблица със стилове, с --bs-columnsи --bs-gap.

В бъдеще Bootstrap вероятно ще премине към хибридно решение, тъй като gapсобствеността е постигнала почти пълна поддръжка на браузъра за flexbox.

Ключови разлики

В сравнение с мрежата по подразбиране:

• Помощните програми на Flex не засягат колоните на CSS Grid по същия начин.

• Пропуските заместват улуците. Свойството gapзамества хоризонтала paddingот нашата мрежова система по подразбиране и функционира по-скоро като margin.

• Като такъв, за разлика от .rows, .grids няма отрицателни маржове и помощните програми за марж не могат да се използват за промяна на улуците на мрежата. Пропуските в мрежата се прилагат хоризонтално и вертикално по подразбиране. Вижте раздела за персонализиране за повече подробности.

• Вградените и потребителските стилове трябва да се разглеждат като заместители на модификаторните класове (напр. style="--bs-columns: 3;"срещу class="row-cols-3").

• Влагането работи по подобен начин, но може да изисква от вас да нулирате броя на колоните си за всеки екземпляр на вложен .grid. Вижте раздела за гнездене за подробности.

Примери

Три колони

Три колони с еднаква ширина във всички прозорци и устройства могат да бъдат създадени с помощта на .g-col-4класовете. Добавете адаптивни класове, за да промените оформлението според размера на прозореца за изглед.

<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>

Отзивчив

Използвайте адаптивни класове, за да коригирате оформлението си в прозорците за изглед. Тук започваме с две колони на най-тесните прозорци за изгледи и след това нарастваме до три колони на средни прозорци за изгледи и нагоре.

<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>

Сравнете това с това оформление с две колони във всички прозорци.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Опаковане

Елементите от мрежата автоматично се пренасят на следващия ред, когато няма повече място хоризонтално. Обърнете внимание, че gapважи за хоризонтални и вертикални празнини между елементите на мрежата.

<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>

Започва

Началните класове имат за цел да заменят офсетните класове на нашата мрежа по подразбиране, но те не са напълно еднакви. CSS Grid създава шаблон за мрежа чрез стилове, които казват на браузърите да „започват от тази колона“ и „завършват с тази колона“. Тези свойства са grid-column-startи grid-column-end. Началните класове са стенограма за първото. Сдвоете ги с класовете на колоните, за да оразмерите и подравните колоните си според нуждите. Началните класове започват от 1as 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>

Авто колони

Когато няма класове в елементите на мрежата (непосредствените потомци на .grid), всеки елемент от мрежата автоматично ще бъде оразмерен до една колона.

<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>

Това поведение може да се смеси с класове от колони на мрежата.

<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>

Гнездене

Подобно на нашата мрежова система по подразбиране, нашата CSS мрежа позволява лесно влагане на .grids. Въпреки това, за разлика от стандартната, тази мрежа наследява промените в редовете, колоните и пропуските. Разгледайте примера по-долу:

• Заменяме броя на колоните по подразбиране с локална CSS променлива: --bs-columns: 3.
• В първата автоматична колона броят на колоните се наследява и всяка колона е една трета от наличната ширина.
• Във втората автоматична колона нулирахме броя на колоните на вложените .gridдо 12 (нашата настройка по подразбиране).
• Третата автоматична колона няма вложено съдържание.

На практика това позволява по-сложни и персонализирани оформления в сравнение с нашата мрежова система по подразбиране.

<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>

Персонализиране

Персонализирайте броя на колоните, броя на редовете и ширината на празнините с локални CSS променливи.

Тези CSS променливи нямат стойност по подразбиране; вместо това те прилагат резервни стойности, които се използват, докато не бъде предоставен локален екземпляр. Например, ние използваме var(--bs-rows, 1)за нашите CSS Grid редове, които игнорират --bs-rows, защото все още не са зададени никъде. След като е така, .gridекземплярът ще използва тази стойност вместо резервната стойност на 1.

Няма класове на мрежата

Непосредствените дъщерни елементи на .gridса мрежови елементи, така че ще бъдат оразмерени без изрично добавяне на .g-colклас.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Колони и празнини

Регулирайте броя на колоните и празнината.

<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>

Добавяне на редове

Добавяне на още редове и промяна на разположението на колоните:

<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>

пропуски

Променете вертикалните празнини само чрез модифициране на row-gap. Обърнете внимание, че използваме gapon .grids, но row-gapи column-gapможе да бъде модифициран според нуждите.

<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>

Поради това можете да имате различни вертикални и хоризонтални gaps, които могат да приемат една стойност (всички страни) или двойка стойности (вертикални и хоризонтални). Това може да се приложи с вграден стил за gapили с нашата --bs-gapCSS променлива.

<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>

дързък

Едно ограничение на CSS Grid е, че нашите класове по подразбиране все още се генерират от две Sass променливи $grid-columnsи $grid-gutter-width. Това на практика предопределя броя на класовете, генерирани в нашия компилиран CSS. Тук имате две възможности:

• Променете тези Sass променливи по подразбиране и прекомпилирайте своя CSS.
• Използвайте вградени или персонализирани стилове, за да разширите предоставените класове.

Например, можете да увеличите броя на колоните и да промените размера на празнината, а след това да оразмерите вашите „колони“ с комбинация от вградени стилове и предварително дефинирани класове колони на CSS Grid (напр. .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>