Igridi yeCSS

Inkqubo yegridi engagqibekanga yeBootstrap imele isiphelo seminyaka elishumi yobuchule boyilo lwe-CSS, oluzanyiwe lwavavanywa zizigidi zabantu. Kodwa, yenziwe ngaphandle kweempawu ezininzi ze-CSS zangoku kunye nobuchule esibubona kwizikhangeli ezifana neCSS Grid entsha.

Ingaba isebenza kanjani

NgeBootstrap 5, songeze ukhetho ukwenza inkqubo yegridi eyahlukileyo eyakhelwe kwiCSS Grid, kodwa ngeBootstrap twist. Usenokufumana iiklasi onokuthi ufake isicelo kwi-whim yokwakha ii-beko eziphendulayo, kodwa ngendlela eyahlukileyo phantsi kwe-hood.

• Igridi yeCSS ingenile. Khubaza isixokelelwano segridi engagqibekanga ngokuseta $enable-grid-classes: falsekwaye uvule igridi yeCSS ngokucwangcisa $enable-cssgrid: true. Emva koko, phinda uhlanganise iSass yakho.

• Faka endaweni yemizekelo .rownge .grid. Iklasi .gridibeka display: gridkwaye idale grid-templateowakha kuyo ngeHTML yakho.

• Tshintsha .col-*iiklasi .g-col-*ngeeklasi. Oku kungenxa yokuba iikholamu zethu zeGridi yeCSS zisebenzisa grid-columnipropathi endaweni ye width.

• Iikholamu kunye neesayizi zegutter zisetwa ngokuguquguquka kweCSS. Seta ezi kumzali .gridkwaye wenze ngendlela ofuna ngayo, emgceni okanye kwiphepha lesimbo, kunye --bs-columnskunye --bs-gap.

Kwixesha elizayo, i-Bootstrap iya kutshintshela kwisisombululo esixubileyo njengoko gapipropathi iphumelele phantse inkxaso epheleleyo yesikhangeli se-flexbox.

Iiyantlukwano eziphambili

Xa kuthelekiswa nenkqubo yegridi ehlala ikho:

• Izinto eziluncedo zeFlex azichaphazeli iikholamu zeGridi yeCSS ngendlela efanayo.

• Izikhewu zithatha indawo yeegatha. Ipropathi gapithatha indawo ethe tye paddingkwindlela yethu yegridi engagqibekanga kwaye isebenza ngakumbi njenge margin.

• Njengokuba, ngokungafaniyo .rows, .grids ayinayo imida engalunganga kunye nezixhobo zomda azinakusetyenziselwa ukutshintsha iigatha zegridi. Izikhewu zegrid zisetyenziswa ngokuthe tye kwaye ngokuthe nkqo ngokungagqibekanga. Jonga icandelo lokulungelelanisa ngeenkcukacha ezithe vetshe.

• Izimbo ezisemgceni kunye neziqhelekileyo kufuneka zijongwe njengokutshintsha iiklasi zesilungisi (umz., style="--bs-columns: 3;"vs class="row-cols-3").

• I-Nesting isebenza ngokufanayo, kodwa inokufuna ukuba usete kwakhona amanani akho ekholamu kumzekelo ngamnye wendlwane .grid. Jonga icandelo lokuzalela ngeenkcukacha.

Imizekelo

Iikholamu ezintathu

Iikholamu ezintathu zobubanzi obulinganayo kuzo zonke iindawo zokujonga kunye nezixhobo zinokudalwa ngokusebenzisa .g-col-4iiklasi. Yongeza iiklasi eziphendulayo ukutshintsha uyilo ngobungakanani bomboniso.

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

Ukusabela

Sebenzisa iiklasi eziphendulayo ukulungelelanisa uyilo lwakho kuzo zonke iindawo zokujonga. Apha siqala ngeekholamu ezimbini kwezona ndawo zimxinwa zokujonga, kwaye emva koko sikhule siye kwiikholamu ezintathu kwiindawo zokujonga eziphakathi nangaphezulu.

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

Thelekisa oko kolu luhlu lwekholamu ezimbini kuzo zonke iindawo zokujonga.

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

Ukusonga

Izinto zegridi zizisonga ngokuzenzekelayo kumgca olandelayo xa kungekho gumbi ngokuthe tye. Qaphela ukuba oku gapkusebenza kwizithuba ezithe tye nezithe nkqo phakathi kwezinto zegridi.

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

Iqala

Iiklasi zokuqala zijolise ekubuyiseleni iiklasi zethu ezisisiseko zegridi, kodwa azifani kwaphela. Igridi yeCSS yenza ithempleyithi yegridi ngezitayile ezixelela izikhangeli ukuba "ziqale kule kholamu" kwaye "ziphele kule kholamu." Ezo propati grid-column-startkwaye grid-column-end. Iiklasi zokuqalisa zimfutshane kwezokuqala. Zibhanqe kunye neeklasi zekholomu kubungakanani kwaye ulungelelanise iikholamu zakho nangona ufuna. Iiklasi zokuqala ziqala 1njengexabiso 0elingasebenziyo kwezi zakhiwo.

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

Iikholamu ezizenzekelayo

Xa kungekho ziklasi kwizinto zegridi (abantwana abakhawulezayo a .grid), into nganye yegridi iya kwenziwa ngokuzenzekelayo kuluhlu olunye.

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

Oku kuziphatha kunokuxutywa neeklasi zekholamu yegridi.

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

Ukuzalela

Ngokufana nenkqubo yethu yegridi engagqibekanga, iGridi yethu yeCSS ivumela ukufuya lula kwes .grid. Nangona kunjalo, ngokungafaniyo nokungagqibekanga, le gridi izuza njengelifa utshintsho kwimiqolo, iikholamu, kunye nezithuba. Qwalasela lo mzekelo ungezantsi:

• Sibhala ngaphezulu inani elingagqibekanga leekholamu ngotshintsho lweCSS lwasekuhlaleni --bs-columns: 3:.
• Kwikholamu yokuqala ezenzekelayo, inani lekholomu lizuzwa njengelifa kwaye ikholamu nganye isinye kwisithathu sobubanzi obukhoyo.
• Kwikholamu yesibini ezenzekelayo, siphinde samisela ukubala kwekholamu kwindlwane .gridukuya kwi-12 (eyethu into engagqibekanga).
• Uluhlu oluzenzekelayo lwesithathu alunamxholo wendlwane.

Xa kusenziwa oku kuvumela uhlengahlengiso oluntsonkothileyo kunye nesiko xa kuthelekiswa nenkqubo yethu yegridi engagqibekanga.

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

Ukwenza ngokwezifiso

Lungiselela inani leekholamu, inani lemiqolo, kunye nobubanzi bezithuba ngokuguquguquka kweCSS yendawo.

Ezi ziguquguqukayo zeCSS azinaxabiso elingagqibekanga; endaweni yoko, bafaka amaxabiso okubuyisela umva asetyenziswa de kubonelelwe ngomzekelo wendawo. Umzekelo, sisebenzisela var(--bs-rows, 1)iCSS yethu imiqolo yeGridi, engahoyiyo --bs-rowskuba akukasetwa naphi na. Xa sele injalo, .gridumzekelo uyakusebenzisa elo xabiso endaweni yexabiso lokubuyela umva le 1.

Akukho ziklasi zegridi

Izinto zangoku zabantwana zizinto .gridzegridi, ke ziya kwenziwa ubungakanani ngaphandle kokongeza ngokucacileyo .g-coliklasi.

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

Imihlathi kunye nezikhewu

Lungisa inani leekholamu kunye nesithuba.

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

Ukongeza imiqolo

Ukongeza imiqolo emininzi kunye nokutshintsha ukubekwa kweekholamu:

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

Izikhewu

Guqula izithuba ezithe nkqo kuphela ngokuguqula ifayile ye row-gap. Qaphela ukuba sisebenzisa gapkwi- .grids, kodwa row-gapkwaye column-gapinokuguqulwa njengoko kufuneka.

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

Ngenxa yoko, unokuba nokwahluka ngokuthe nkqo kunye nokuthe tye gaps, okungathatha ixabiso elinye (onke macala) okanye iperi yamaxabiso (ethe nkqo kwaye ethe tye). Oku kunokusetyenziswa ngesimbo esingaphakathi kumgca we- gap, okanye --bs-gapngokuguquguquka kwethu kweCSS.

<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

Omnye umda weCSS Grid kukuba iiklasi zethu ezingagqibekanga zisaveliswa ziinguqu ezimbini zeSass, $grid-columnskunye $grid-gutter-width. Oku kumisela kwangaphambili ngokufanelekileyo inani leeklasi ezenziweyo kwi-CSS yethu ehlanganisiweyo. Uneendlela ezimbini ongakhetha kuzo apha:

• Guqula ezo ziguquguqukayo zeSass ezingagqibekanga kwaye uqokelele iCSS yakho.
• Sebenzisa i-inline okanye izimbo zesiko ukongeza iiklasi ezinikiweyo.

Umzekelo, unokwandisa inani lekholomu kwaye utshintshe ubungakanani besithuba, kwaye ngoko ubungakanani "iikholamu" zakho kunye nomxube weendlela ezingaphakathi kunye neeklasi zekholomu ze-CSS Grid ezichazwe kwangaphambili (umz., .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>