Grid CSS

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: falseu ppermetti l-Grid CSS billi tissettja $enable-cssgrid: true. Imbagħad, ikkompila mill-ġdid Sass tiegħek.

• Ibdel każijiet ta ' .rowma .grid. Il- .gridklassi tistabbilixxi display: gridu toħloq a grid-templateli 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-columnproprjetà minflok width.

• Kolonni u daqsijiet tal-kanal huma stabbiliti permezz ta 'varjabbli CSS. Issettja dawn fuq il-ġenitur .gridu ppersonalizza kif trid, inline jew fi stylesheet, bi --bs-columnsu --bs-gap.

Fil-futur, Bootstrap x'aktarx se jmur għal soluzzjoni ibrida peress li l- gapproprjetà 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-orizzontali paddingmis-sistema tal-grilja default tagħna u tiffunzjona aktar bħal margin.

• Bħala tali, b'differenza .rows, .grids 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;"vs class="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-4klassijiet. Żid klassijiet li jirrispondu biex tbiddel it-tqassim skond id-daqs tal-viewport.

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

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

Qabbel dan ma 'dan it-tqassim ta' żewġ kolonni fil-faċċati kollha.

<div class="grid text-center">
  <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- gapapplika għal distanzi orizzontali u vertikali bejn l-oġġetti tal-grilja.

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

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-startu 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 1kif 0inhu valur invalidu għal dawn il-proprjetajiet.

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

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

Din l-imġieba tista 'titħallat ma' klassijiet ta 'kolonni tal-grilja.

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

Ibejtu

Simili għas-sistema tal-grilja awtomatika tagħna, il-Grid CSS tagħna jippermetti tbejtu faċli ta ' .grids. 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 .gridgħ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 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>

Customizing

Ippersonalizza n-numru ta 'kolonni, in-numru ta' ringieli, u l-wisa 'tal-lakuni b'varjabbli CSS lokali.

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-rowsgħaliex dak għadu ma ġie stabbilit imkien. Ladarba jkun, l- .gridistanza tuża dak il-valur minflok il-valur ta' riżerva ta' 1.

Ebda klassijiet tal-grilja

L-elementi tat-tfal immedjati ta' .gridhuma oġġetti tal-grilja, u għalhekk ser ikunu ta' daqs mingħajr ma żżid espliċitament .g-colklassi.

<div class="grid text-center" 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 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>

Żieda ringieli

Iżżid aktar ringieli u tbiddel it-tqegħid tal-kolonni:

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

Lakuni

Ibdel il-lakuni vertikali biss billi timmodifika l- row-gap. Innota li nużaw gapfuq .grids, iżda row-gapu column-gapjistgħu jiġu modifikati kif meħtieġ.

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

Minħabba dan, jista 'jkollok gaps 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-gapvarjabbli CSS tagħna.

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

Sass

Limitazzjoni waħda tas-CSS Grid hija li l-klassijiet default tagħna għadhom iġġenerati minn żewġ varjabbli Sass, $grid-columnsu $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.

Pereżempju, tista 'żżid l-għadd tal-kolonni u tibdel id-daqs tal-vojt, u mbagħad id-daqs tal-"kolonni" tiegħek b'taħlita ta' stili inline u klassijiet ta 'kolonni CSS Grid predefiniti (eż .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>