ЦСС Грид

Боотстрап-ов подразумевани грид систем представља кулминацију више од деценије техника ЦСС распореда, које су испробали и тестирали милиони људи. Али, такође је креиран без многих модерних ЦСС функција и техника које видимо у претраживачима као што је нова ЦСС Грид.

Како то ради

Уз Боотстрап 5, додали смо опцију да омогућимо посебан систем мреже који је изграђен на ЦСС Грид-у, али са Боотстрап обртом. И даље добијате часове које можете да примените по вољи да бисте направили прилагодљиве распореде, али са другачијим приступом испод хаубе.

• ЦСС Грид је укључен. Онемогућите подразумевани систем мреже подешавањем $enable-grid-classes: falseи омогућите ЦСС мрежу подешавањем $enable-cssgrid: true. Затим поново компајлирајте свој Сасс.

• Замените инстанце .rowса .grid. Класа .gridпоставља display: gridи креира а на grid-templateкојем градите свој ХТМЛ.

• Замените .col-*класе .g-col-*класама. То је зато што наше ЦСС Грид колоне користе grid-columnсвојство уместо width.

• Колоне и величине олука се постављају преко ЦСС променљивих. Поставите их на надређени .gridи прилагодите како год желите, уметнути или у табели стилова, помоћу --bs-columnsи --bs-gap.

У будућности, Боотстрап ће вероватно прећи на хибридно решење пошто је gapсвојство постигло скоро пуну подршку претраживача за флекбок.

Кључне разлике

У поређењу са подразумеваним системом мреже:

• Флек услужни програми не утичу на ЦСС Грид колоне на исти начин.

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

• Као такви, за разлику од .rowс, .gridс немају негативне маргине и маргине се не могу користити за промену олука мреже. Подразумевано се празнине у мрежи примењују хоризонтално и вертикално. Погледајте одељак о прилагођавању за више детаља.

• Инлине и прилагођене стилове треба посматрати као замене за класе модификатора (нпр. 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>

Почиње

Почетне класе имају за циљ да замене класе офсет наше подразумеване мреже, али оне нису потпуно исте. ЦСС Грид креира шаблон мреже кроз стилове који говоре прегледачима да „почну од ове колоне“ и „заврше у овој колони“. Та својства су grid-column-startи grid-column-end. Почетак наставе је скраћеница за прве. Упарите их са класама колона према величини и поравнајте своје колоне како год вам је потребно. Почетне класе почињу са 1ас 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>

Нестинг

Слично нашем подразумеваном систему мреже, наш ЦСС Грид омогућава лако угнежђење .gridс. Међутим, за разлику од подразумеване, ова мрежа наслеђује промене у редовима, колонама и празнинама. Размотрите пример у наставку:

• Ми замењујемо подразумевани број колона са локалном ЦСС променљивом: --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>

Прилагођавање

Прилагодите број колона, број редова и ширину празнина помоћу локалних ЦСС променљивих.

Ове ЦСС променљиве немају подразумевану вредност; уместо тога примењују резервне вредности које се користе док се не обезбеди локална инстанца. На пример, користимо var(--bs-rows, 1)за наше редове ЦСС мреже, који игнорише --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. Имајте на уму да користимо gapна .gridс, али 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>

Због тога можете имати различите вертикалне и хоризонталне gapс, које могу узети једну вредност (све стране) или пар вредности (вертикалне и хоризонталне). Ово се може применити са уграђеним стилом за gap, или са нашом --bs-gapЦСС променљивом.

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

Сасс

Једно ограничење ЦСС Грид-а је то што се наше подразумеване класе и даље генеришу помоћу две Сасс променљиве $grid-columnsи $grid-gutter-width. Ово ефективно унапред одређује број класа генерисаних у нашем компајлираном ЦСС-у. Овде имате две опције:

• Измените те подразумеване Сасс променљиве и поново компајлирајте свој ЦСС.
• Користите уграђене или прилагођене стилове да бисте повећали дате класе.

На пример, можете повећати број колона и променити величину празнине, а затим димензионисати своје „колоне“ мешавином уграђених стилова и унапред дефинисаних класа колона ЦСС Грид (нпр. .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>