Сетка 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-gapзменнай CSS.

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