Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

ЦСС Грид

Научите како да омогућите, користите и прилагодите наш алтернативни систем распореда изграђен на ЦСС Грид-у са примерима и исечцима кода.

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

Пазите – наш ЦСС Грид систем је експерименталан и омогућава га од в5.1.0! Укључили смо га у ЦСС наше документације да бисмо вам га демонстрирали, али је подразумевано онемогућен. Наставите да читате да бисте сазнали како да то омогућите у својим пројектима.

Како то ради

Уз Боотстрап 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Коришћењем класа могу се креирати три колоне једнаке ширине у свим оквирима за приказ и уређајима . Додајте прилагодљиве класе да бисте променили изглед према величини оквира за приказ.

.г-цол-4
.г-цол-4
.г-цол-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>

Респонсиве

Користите класе које реагују да бисте прилагодили свој изглед у оквиру приказа. Овде почињемо са две колоне на најужим оквирима за приказ, а затим растемо до три колоне на средњим оквирима за приказ и изнад.

.г-цол-6 .г-цол-мд-4
.г-цол-6 .г-цол-мд-4
.г-цол-6 .г-цол-мд-4
хтмл
<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>

Упоредите то са изгледом ове две колоне на свим оквирима за приказ.

.г-цол-6
.г-цол-6
хтмл
<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односи на хоризонталне и вертикалне празнине између ставки мреже.

.г-цол-6
.г-цол-6
.г-цол-6
.г-цол-6
хтмл
<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је неважећа вредност за ова својства.

.г-цол-3 .г-старт-2
.г-цол-4 .г-старт-6
хтмл
<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), свака ставка мреже ће аутоматски бити величине једне колоне.

1
1
1
1
1
1
1
1
1
1
1
1
хтмл
<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>

Ово понашање се може мешати са класама колона мреже.

.г-цол-6
1
1
1
1
1
1
хтмл
<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 (наше подразумевано).
  • Трећа ауто-колона нема угнежђени садржај.

У пракси ово омогућава сложеније и прилагођеније распореде у поређењу са нашим подразумеваним системом мреже.

Прва ауто-колона
Ауто-колона
Ауто-колона
Друга ауто-колона
6 од 12
4 од 12
2 од 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>

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

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

Променљива Резервна вредност Опис
--bs-rows 1 Број редова у шаблону мреже
--bs-columns 12 Број колона у шаблону мреже
--bs-gap 1.5rem Величина размака између колона (вертикалних и хоризонталних)

Ове ЦСС променљиве немају подразумевану вредност; уместо тога примењују резервне вредности које се користе док се не обезбеди локална инстанца. На пример, користимо 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>

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

Подесите број колона и размак.

.г-цол-2
.г-цол-2
хтмл
<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>
.г-цол-6
.г-цол-4
хтмл
<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може се модификовати по потреби.

.г-цол-6
.г-цол-6
.г-цол-6
.г-цол-6
хтмл
<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ЦСС променљивом.

.г-цол-6
.г-цол-6
.г-цол-6
.г-цол-6
хтмл
<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).

14 колона
.г-цол-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>