Grid CSS
Tgħallem kif tattiva, tuża, u tippersonalizza s-sistema ta' tqassim alternattiv tagħna mibnija fuq CSS Grid b'eżempji u snippets tal-kodiċi.
Is-sistema ta 'grilja default ta' Bootstrap tirrappreżenta l-qofol ta 'aktar minn għaxar snin ta' tekniki ta 'tqassim CSS, ippruvati u ttestjati minn miljuni ta' nies. Iżda, inħoloq ukoll mingħajr ħafna mill-karatteristiċi u tekniki moderni tas-CSS li qed naraw fil-browsers bħall-CSS Grid il-ġdid.
Kif taħdem
B'Bootstrap 5, żidna l-għażla li nippermettu sistema ta' grilja separata li hija mibnija fuq CSS Grid, iżda b'tidwira Bootstrap. Int xorta tikseb klassijiet li tista 'tapplika fuq kapriċċ biex tibni layouts reattivi, iżda b'approċċ differenti taħt il-barnuża.
-
CSS Grid hija opt-in. Itfi s-sistema tal-grilja default billi tissettja
$enable-grid-classes: false
u ppermetti l-Grid CSS billi tissettja$enable-cssgrid: true
. Imbagħad, ikkompila mill-ġdid Sass tiegħek. -
Ibdel każijiet ta '
.row
ma.grid
. Il-.grid
klassi tistabbilixxidisplay: grid
u toħloq agrid-template
li tibni fuqha bl-HTML tiegħek. -
Ibdel
.col-*
il-klassijiet bi.g-col-*
klassijiet. Dan għaliex il-kolonni tal-Grid CSS tagħna jużaw il-grid-column
proprjetà minflokwidth
. -
Kolonni u daqsijiet tal-kanal huma stabbiliti permezz ta 'varjabbli CSS. Issettja dawn fuq il-ġenitur
.grid
u ppersonalizza kif trid, inline jew fi stylesheet, bi--bs-columns
u--bs-gap
.
Fil-futur, Bootstrap x'aktarx se jmur għal soluzzjoni ibrida peress li l- gap
proprjetà kisbet appoġġ kważi sħiħ tal-browser għall-flexbox.
Differenzi ewlenin
Meta mqabbel mas-sistema tal-grilja default:
-
L-utilitajiet Flex ma jaffettwawx il-kolonni tal-Grid CSS bl-istess mod.
-
Il-lakuni jissostitwixxu l-kanali. Il
gap
-proprjetà tissostitwixxi l-orizzontalipadding
mis-sistema tal-grilja default tagħna u tiffunzjona aktar bħalmargin
. -
Bħala tali, b'differenza
.row
s,.grid
s m'għandhomx marġini negattivi u l-utilitajiet tal-marġni ma jistgħux jintużaw biex jibdlu l-kanali tal-grilja. Lakuni fil-grilja huma applikati orizzontalment u vertikalment b'mod awtomatiku. Ara t- taqsima tal-personalizzazzjoni għal aktar dettalji. -
L-istili inline u personalizzati għandhom jitqiesu bħala sostituti għall-klassijiet tal-modifikaturi (eż.
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting jaħdem bl-istess mod, iżda jista 'jeħtieġ li tirrisettja l-għadd tal-kolonni tiegħek fuq kull istanza ta'
.grid
. Ara t- taqsima tal-bejta għad-dettalji.
Eżempji
Tliet kolonni
Jistgħu jinħolqu tliet kolonni ta 'wisa' ugwali fil-wiri u l-apparati kollha bl-użu tal- .g-col-4
klassijiet. Żid klassijiet li jirrispondu biex tbiddel it-tqassim skond id-daqs tal-viewport.
<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>
Jirrispondi
Uża klassijiet li jirreaġixxu biex taġġusta t-tqassim tiegħek fuq il-wiri. Hawnhekk nibdew b'żewġ kolonni fuq l-iktar viewports dejqa, u mbagħad nikbru għal tliet kolonni fuq viewports medji u 'l fuq.
<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>
Qabbel dan ma 'dan it-tqassim ta' żewġ kolonni fil-faċċati kollha.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Tgeżwir
L-oġġetti tal-grilja awtomatikament ikebbeb mal-linja li jmiss meta ma jkunx hemm aktar spazju orizzontalment. Innota li l- gap
applika għal distanzi orizzontali u vertikali bejn l-oġġetti tal-grilja.
<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>
Jibda
Il-klassijiet tal-bidu għandhom l-għan li jissostitwixxu l-klassijiet offset tal-grilja default tagħna, iżda mhumiex kompletament l-istess. CSS Grid toħloq mudell ta' grilja permezz ta' stili li jgħidu lill-browsers biex "jibdew minn din il-kolonna" u "jispiċċaw f'din il-kolonna". Dawk il-proprjetajiet huma grid-column-start
u grid-column-end
. Klassijiet tal-bidu huma shorthand għall-ewwel. Għaqqadhom mal-klassijiet tal-kolonni għad-daqs u tallinja l-kolonni tiegħek kif għandek bżonn. Il-klassijiet tal-bidu jibdew fi 1
kif 0
inhu valur invalidu għal dawn il-proprjetajiet.
<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>
Kolonni awtomatiċi
Meta ma jkun hemm l-ebda klassijiet fuq l-oġġetti tal-grilja (it-tfal immedjati ta 'a .grid
), kull oġġett tal-grilja awtomatikament jitqies għal kolonna waħda.
<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>
Din l-imġieba tista 'titħallat ma' klassijiet ta 'kolonni tal-grilja.
<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>
Ibejtu
Simili għas-sistema tal-grilja awtomatika tagħna, il-Grid CSS tagħna jippermetti tbejtu faċli ta ' .grid
s. Madankollu, b'differenza mill-inadempjenza, din il-grilja tirret il-bidliet fir-ringieli, il-kolonni u l-lakuni. Ikkunsidra l-eżempju hawn taħt:
- Aħna jegħlbu n-numru default ta 'kolonni b'varjabbli CSS lokali:
--bs-columns: 3
. - Fl-ewwel kolonna awtomatika, l-għadd tal-kolonna jintiret u kull kolonna hija terz tal-wisa 'disponibbli.
- Fit-tieni kolonna awtomatika, konna reset l-għadd tal-kolonna fuq il-best
.grid
għal 12 (default tagħna). - It-tielet kolonna awtomatika m'għandha l-ebda kontenut nested.
Fil-prattika dan jippermetti layouts aktar kumplessi u personalizzati meta mqabbla mas-sistema tal-grilja default tagħna.
<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>
Customizing
Ippersonalizza n-numru ta 'kolonni, in-numru ta' ringieli, u l-wisa 'tal-lakuni b'varjabbli CSS lokali.
Varjabbli | Valur ta' riżerva | Deskrizzjoni |
---|---|---|
--bs-rows |
1 |
In-numru ta' ringieli fil-mudell tal-grilja tiegħek |
--bs-columns |
12 |
In-numru ta' kolonni fil-mudell tal-grilja tiegħek |
--bs-gap |
1.5rem |
Id-daqs tad-distakk bejn il-kolonni (vertikali u orizzontali) |
Dawn il-varjabbli CSS m'għandhom l-ebda valur default; minflok, japplikaw valuri ta' riżerva li jintużaw sakemm tiġi pprovduta istanza lokali. Pereżempju, nużaw var(--bs-rows, 1)
għar-ringieli tal-Grid tas-CSS tagħna, li jinjora --bs-rows
għaliex dak għadu ma ġie stabbilit imkien. Ladarba jkun, l- .grid
istanza tuża dak il-valur minflok il-valur ta' riżerva ta' 1
.
Ebda klassijiet tal-grilja
L-elementi tat-tfal immedjati ta' .grid
huma oġġetti tal-grilja, u għalhekk ser ikunu ta' daqs mingħajr ma żżid espliċitament .g-col
klassi.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kolonni u lakuni
Aġġusta n-numru ta 'kolonni u d-distakk.
<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>
Żieda ringieli
Iżżid aktar ringieli u tbiddel it-tqegħid tal-kolonni:
<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>
Lakuni
Ibdel il-lakuni vertikali biss billi timmodifika l- row-gap
. Innota li nużaw gap
fuq .grid
s, iżda row-gap
u column-gap
jistgħu jiġu modifikati kif meħtieġ.
<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>
Minħabba dan, jista 'jkollok gap
s vertikali u orizzontali differenti, li jistgħu jieħdu valur wieħed (in-naħat kollha) jew par ta' valuri (vertikali u orizzontali). Dan jista 'jiġi applikat bi stil inline għal gap
, jew bil- --bs-gap
varjabbli CSS tagħna.
<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>
Sass
Limitazzjoni waħda tas-CSS Grid hija li l-klassijiet default tagħna għadhom iġġenerati minn żewġ varjabbli Sass, $grid-columns
u $grid-gutter-width
. Dan jippredetermina b'mod effettiv in-numru ta 'klassijiet iġġenerati fis-CSS ikkumpilat tagħna. Għandek żewġ għażliet hawn:
- Immodifika dawk il-varjabbli Sass default u kkompila mill-ġdid is-CSS tiegħek.
- Uża stili inline jew personalizzati biex iżżid il-klassijiet ipprovduti.
Per eżempju, tista 'żżid l-għadd tal-kolonni u tibdel id-daqs tal-vojt, u mbagħad qies il-"kolonni" tiegħek b'taħlita ta' stili inline u klassijiet ta 'kolonni CSS Grid predefiniti (eż, .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>