Сетка CSS
Даведайцеся, як уключыць, выкарыстоўваць і наладзіць нашу альтэрнатыўную сістэму макета, пабудаваную на CSS Grid, з прыкладамі і фрагментамі кода.
Сістэма сетак па змаўчанні 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
. -
Такім чынам, у адрозненне ад
.row
s,.grid
s не маюць адмоўных запасаў, і ўтыліты маржы не могуць быць выкарыстаны для змены жолабаў сеткі. Прамежкі сеткі прымяняюцца па гарызанталі і вертыкалі па змаўчанні. Глядзіце раздзел наладкі для больш падрабязнай інфармацыі. -
Убудаваныя і карыстальніцкія стылі трэба разглядаць як замену для класаў-мадыфікатараў (напрыклад,
style="--bs-columns: 3;"
супраць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
as 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
s. Аднак, у адрозненне ад стандартнай, гэтая сетка ўспадкоўвае змены ў радках, слупках і прабелах. Разгледзім прыклад ніжэй:
- Мы перавызначаем колькасць слупкоў па змаўчанні лакальнай зменнай 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.
Пераменная | Рэзервовае значэнне | Апісанне |
---|---|---|
--bs-rows |
1 |
Колькасць радкоў у вашым шаблоне сеткі |
--bs-columns |
12 |
Колькасць слупкоў у вашым шаблоне сеткі |
--bs-gap |
1.5rem |
Памер зазору паміж слупкамі (вертыкальным і гарызантальным) |
Гэтыя зменныя 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
on .grid
s, але 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>
З-за гэтага вы можаце мець розныя вертыкальныя і гарызантальныя gap
s, якія могуць прымаць адно значэнне (усе бакі) або пару значэнняў (вертыкальнае і гарызантальнае). Гэта можа быць ужыта з дапамогай убудаванага стылю для gap
або з дапамогай нашай --bs-gap
зменнай CSS.
<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>