CSS мрежа

Стандардниот мрежен систем на Bootstrap претставува кулминација на повеќе од една деценија техники за распоред на CSS, испробани и тестирани од милиони луѓе. Но, тој беше создаден и без многу модерни CSS карактеристики и техники што ги гледаме во прелистувачите како новата CSS Grid.

Како работи

Со Bootstrap 5, ја додадовме опцијата да овозможиме посебен мрежен систем кој е изграден на CSS Grid, но со пресврт на Bootstrap. Сè уште добивате часови што можете да ги примените по желба за да изградите распореди што реагираат, но со поинаков пристап под хаубата.

• CSS Grid е вклучена. Оневозможете го стандардниот мрежен систем со поставување $enable-grid-classes: falseи овозможете го CSS Grid со поставување $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.

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

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

• Utilities на Flex не влијаат на колоните CSS Grid на ист начин.

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

• Како такви, за разлика од .rows, .grids немаат негативни маржи и маргините не можат да се користат за промена на олуците на мрежата. Празнините во мрежата стандардно се применуваат хоризонтално и вертикално. Погледнете го делот за прилагодување за повеќе детали.

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

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

Примери

Три колони

Три колони со еднаква ширина низ сите пристаништа за преглед и уреди може да се креираат со користење на .g-col-4класите. Додајте одзивни класи за да го промените распоредот според големината на приказот.

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

Одговорен

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

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

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

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

Завиткување

Ставките на мрежата автоматски се преклопуваат на следната линија кога нема повеќе простор хоризонтално. Забележете дека се gapоднесува на хоризонтални и вертикални празнини помеѓу ставките од мрежата.

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

Започнува

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

Автоматски колони

Кога нема класи на ставките на мрежата (непосредните деца на .grid), секоја ставка од мрежа автоматски ќе биде големината на една колона.

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

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

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

Гнездење

Слично на нашиот стандарден мрежен систем, нашата CSS Grid овозможува лесно вгнездување на .grids. Меѓутоа, за разлика од стандардното, оваа мрежа наследува промени во редовите, колоните и празнините. Размислете за примерот подолу:

• Го отфрламе стандардниот број на колони со локална CSS променлива: --bs-columns: 3.
• Во првата авто-колона, бројот на колони се наследува и секоја колона е една третина од достапната ширина.
• Во втората авто-колона, го ресетиравме бројот на колони на вгнездената .gridна 12 (наша стандардна).
• Третата авто-колона нема вгнездена содржина.

Во пракса ова овозможува посложени и прилагодени распореди во споредба со нашиот стандарден мрежен систем.

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

Приспособување

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

Овие CSS променливи немаат стандардна вредност; наместо тоа, тие применуваат резервни вредности кои се користат додека не се обезбеди локална инстанца. На пример, ние користиме var(--bs-rows, 1)за нашите редови CSS Grid, кои ги игнорираат --bs-rowsбидејќи сè уште не е поставено никаде. Откако ќе биде, .gridинстанцата ќе ја користи таа вредност наместо резервната вредност на 1.

Нема класи на мрежа

Непосредните детски елементи на .gridсе ставки во мрежа, така што тие ќе бидат димензионирани без експлицитно додавање .g-colкласа.

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

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

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

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

Додавање редови

Додавање повеќе редови и менување на поставеноста на колоните:

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

Празнини

Променете ги вертикалните празнини само со менување на row-gap. Забележете дека ние користиме gapна .grids, но row-gapи column-gapможе да се менува по потреба.

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

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

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

Сас

Едно ограничување на CSS Grid е дека нашите стандардни класи сè уште се генерираат од две Sass променливи $grid-columnsи $grid-gutter-width. Ова ефективно го предодредува бројот на класи генерирани во нашиот компајлиран CSS. Имате две опции овде:

• Изменете ги стандардните Sass променливи и прекомпајлирајте го вашиот CSS.
• Користете вградени или сопствени стилови за да ги зголемите дадените класи.

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