Igridi ye-CSS

Funda ukuthi uvumela kanjani, usebenzise, futhi wenze ngendlela oyifisayo enye isistimu yethu yesakhiwo eyakhelwe ku-CSS Grid enezibonelo namazwibela ekhodi.

Kuleli khasi

Isistimu yegridi ezenzakalelayo ye-Bootstrap imele isiphetho seminyaka engaphezu kweshumi yamasu wesakhiwo se-CSS, azanywe futhi avivinywa izigidi zabantu. Kodwa, iphinde yadalwa ngaphandle kwezici eziningi zesimanje ze-CSS namasu esiwabona kuziphequluli ezifana ne-CSS Grid entsha.

Qaphela—uhlelo lwethu Lwegridi ye-CSS luyahlolwa futhi lungena kusukela ku-v5.1.0! Siyifake ku-CSS yemibhalo yethu ukuze sikubonise yona, kodwa ikhutshazwe ngokuzenzakalela. Qhubeka ufunda ukuze ufunde ukuthi ungakunika kanjani amandla kumaphrojekthi akho.

Isebenza kanjani

Nge-Bootstrap 5, sengeze inketho yokunika amandla isistimu yegridi ehlukile eyakhelwe ku-CSS Grid, kodwa nge-Bootstrap twist. Usawathola amakilasi ongawafaka ngokuthanda kwakho ukuze wakhe izakhiwo ezisabelayo, kodwa ngendlela ehlukile ngaphansi kwe-hood.

Igridi ye-CSS ikhethe ukungena. Khubaza isistimu yegridi emisiwe ngokusetha $enable-grid-classes: falsefuthi unike amandla Igridi ye-CSS ngokusetha $enable-cssgrid: true. Bese, hlanganisa kabusha i-Sass yakho.
Faka esikhundleni izibonelo .rownge .grid. Ikilasi .gridlisetha display: gridfuthi lidale grid-templateowakha phezu kwalo nge-HTML yakho.
Shintshanisa .col-*amakilasi .g-col-*ngamakilasi. Lokhu kungenxa yokuthi amakholomu ethu eGridi ye-CSS asebenzisa grid-columnisakhiwo esikhundleni se- width.
Amakholomu nosayizi we-gutter asethwa ngokuguquguquka kwe-CSS. Zibeke kumzali .gridfuthi wenze ngendlela othanda ngayo noma kanjani, emgqeni noma eshidini lesitayela, --bs-columnskanye --bs-gap.

Ngokuzayo, i-Bootstrap izoshintshela kusixazululo esiyingxubevange njengoba gapindawo isizuze ukusekelwa okugcwele kwesiphequluli se-flexbox.

Umehluko oyinhloko

Uma kuqhathaniswa nesistimu yegridi ezenzakalelayo:

Izinsiza ze-Flex awazithinti amakholomu eGridi ye-CSS ngendlela efanayo.
Izikhala zithatha indawo yama-gutters. Indawo gapingena esikhundleni paddingsokuvundlile kusistimu yethu yegridi ezenzakalelayo futhi isebenza njenge margin.
Kanjalo, ngokungafani no .row-s, u- .grids akanawo amamajini angemahle futhi izinsiza ze-margin azikwazi ukusetshenziselwa ukushintsha ama-gutters egridi. Izikhala zegridi zisetshenziswa ngokuvundlile nangokuqondile ngokuzenzakalelayo. Bona isigaba sokwenza ngendlela oyifisayo ukuze uthole imininingwane eyengeziwe.
Izitayela ezingaphakathi komugqa nezingokwezifiso kufanele zibhekwe njengokuthatha indawo yezigaba zesilungisi (isb., style="--bs-columns: 3;"ngokumelene class="row-cols-3").
I-Nesting isebenza ngendlela efanayo, kodwa ingase idinge ukuthi usethe kabusha izibalo zekholomu yakho esimweni ngasinye se-nested .grid. Bona isigaba sokuzalela ukuze uthole imininingwane.

Izibonelo

Amakholomu amathathu

Amakholomu amathathu anobubanzi obulinganayo kuzo zonke izinkundla zokubuka namadivayisi angadalwa kusetshenziswa .g-col-4amakilasi. Engeza amakilasi asabelayo ukuze ushintshe isakhiwo ngosayizi wembobo yokubuka.

.g-col-4

html

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

Iyasabela

Sebenzisa amakilasi aphendulayo ukuze ulungise isakhiwo sakho kuzo zonke izimbobo zokubuka. Lapha siqala ngamakholomu amabili ezimbotsheni zokubuka ezincane kakhulu, bese sikhula sibe amakholomu amathathu ezimbobeni zokubuka ezimaphakathi nangaphezulu.

.g-col-6 .g-col-md-4

html

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

Qhathanisa lokho nalesi sakhiwo samakholomu amabili kuzo zonke izinkundla zokubuka.

.g-col-6

html

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

Ukusonga

Izinto zegridi zigoqa ngokuzenzakalelayo emugqeni olandelayo uma lingasekho igumbi elivundlile. Qaphela ukuthi lokhu gapkusebenza ezikhaleni ezivundlile nezime mpo phakathi kwezinto zegridi.

.g-col-6

html

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

Iqala

Amakilasi okuqala ahlose ukumiselela amakilasi ethu azenzakalelayo egridi, kodwa awafani nhlobo. Igridi ye-CSS idala isifanekiso segridi ngezitayela ezitshela iziphequluli ukuthi “ziqale kule kholomu” futhi “zigcine kule kholomu.” Lezo zakhiwo ziyi grid-column-startfuthi grid-column-end. Amakilasi okuqala afushanisiwe kowokuqala. Wabhanqe namakilasi ekholomu ngosayizi futhi uqondanise amakholomu akho ngendlela oyidingayo. Amakilasi okuqala aqala 1njengenani 0elingavumelekile lalezi zici.

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

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

Amakholomu azenzakalelayo

Uma engekho amakilasi ezintweni zegridi (izingane eziseduze ze-a .grid), into ngayinye yegridi izolinganiswa ngokuzenzakalelayo ibe ikholomu eyodwa.

html

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

Lokhu kuziphatha kungaxutshwa namakilasi ekholomu yegridi.

.g-col-6

html

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

Ukwenza isidleke

Ngokufana nesistimu yethu yegridi ezenzakalelayo, Igridi yethu ye-CSS ivumela ukuzalela okulula kwe- .grids. Nokho, ngokungafani nokuzenzakalelayo, le gridi izuza njengefa izinguquko emigqeni, amakholomu, nezikhala. Cabangela isibonelo esingezansi:

Sikhipha inombolo emisiwe yamakholomu ngokuhlukahluka kwendawo ye-CSS: --bs-columns: 3.
Kukholomu ezenzakalelayo yokuqala, isibalo sekholomu sizuzwa njengefa futhi ikholomu ngayinye iyingxenye eyodwa kwezintathu yobubanzi obutholakalayo.
Kukholomu yesibili ezenzakalelayo, sisethe kabusha ukubala kwekholomu kokubekwe kusidleke .gridku-12 (okuzenzakalelayo kwethu).
Ikholomu ezenzakalelayo yesithathu ayinakho okuqukethwe esidlekeni.

Empeleni lokhu kuvumela izakhiwo eziyinkimbinkimbi nezingokwezifiso uma kuqhathaniswa nesistimu yethu yegridi ezenzakalelayo.

Ikholomu ezenzakalelayo yokuqala

Ikholomu ezenzakalelayo

Ikholomu ezenzakalelayo yesibili

6 ku12

4 ku12

2 ku12

Ikholomu ezenzakalelayo yesithathu

html

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

Ukwenza ngokwezifiso

Enza ngendlela oyifisayo inani lamakholomu, inani lemigqa, nobubanzi bezikhala ngokuhlukahluka kwendawo ye-CSS.

Iyaguquguquka	Inani lokubuyela emuva	Incazelo
`--bs-rows`	`1`	Inani lemigqa kusifanekiso sakho segridi
`--bs-columns`	`12`	Inani lamakholomu kusifanekiso sakho segridi
`--bs-gap`	`1.5rem`	Usayizi wegebe phakathi kwamakholomu (okuqondile nokuvundlile)

Lezi zinguquko ze-CSS azinalo inani elizenzakalelayo; esikhundleni salokho, zisebenzisa amanani okubuyela emuva asetshenziswa kuze kube yilapho kunikezwa isibonelo sasendaweni. Isibonelo, sisebenzisa var(--bs-rows, 1)imigqa yethu Yegridi ye-CSS, eshaya indiva --bs-rowsngoba lokho akukakasethwa noma kuphi. Uma sekunje, .gridisibonelo sizosebenzisa lelo nani esikhundleni senani lokubuyela emuva lika- 1.

Awekho amakilasi egridi

Izinto ezisheshayo zezingane .gridziyizinto zegridi, ngakho zizolinganiswa ngaphandle kokwengeza .g-colikilasi ngokusobala.

Ikholomu ezenzakalelayo

html

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

Amakholomu nezikhala

Lungisa inani lamakholomu kanye negebe.

.g-col-2

html

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

.g-col-6

.g-col-4

html

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

Yengeza imigqa

Ukwengeza imigqa eyengeziwe nokushintsha ukubekwa kwamakholomu:

Ikholomu ezenzakalelayo

html

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

Izikhala

Shintsha izikhala ezime mpo kuphela ngokulungisa ifayela le- row-gap. Qaphela ukuthi sisebenzisa gapku- .grids, kodwa row-gapfuthi column-gapsingashintshwa njengoba kudingeka.

.g-col-6

html

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

Ngenxa yalokho, ungaba no- gaps abaqondile nabavundlile abahlukene, okungathatha inani elilodwa (zonke izinhlangothi) noma amanani amabili (aqondile futhi avundlile). Lokhu kungasetshenziswa ngesitayela esisemgqeni se- gap, noma ngokuhlukahluka kwethu kwe- --bs-gapCSS.

.g-col-6

html

<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

Umkhawulo owodwa weGridi ye-CSS ukuthi amakilasi ethu azenzakalelayo asakhiqizwa okuguquguqukayo okubili kwe-Sass, $grid-columnskanye $grid-gutter-width. Lokhu kunquma kusengaphambili ngempumelelo inani lamakilasi akhiqizwe ku-CSS yethu ehlanganisiwe. Unezinketho ezimbili lapha:

Lungisa lezo ziguquguqukayo ezizenzakalelayo ze-Sass futhi uhlanganise kabusha i-CSS yakho.
Sebenzisa izitayela ezingaphakathi komugqa noma zangokwezifiso ukuze ukhulise amakilasi anikeziwe.

Isibonelo, ungakwazi ukwandisa isibalo sekholomu futhi ushintshe usayizi wegebe, bese usayizi “amakholomu” akho ngengxube yezitayela ezisemgqeni kanye namakilasi ekholomu yegridi echazwe ngaphambilini ye-CSS (isb, .g-col-4).

14 amakholomu

.g-col-4

html

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