Grid ea CSS
Ithute mokhoa oa ho bulela, ho sebelisa, le ho beakanya tsamaiso ea rona e 'ngoe ea meralo e hahiloeng holim'a Grid ea CSS ka mehlala le likaroloana tsa khoutu.
Sistimi ea grid ea kamehla ea Bootstrap e emela pheletso ea lilemo tse fetang leshome tsa mekhoa ea sebopeho sa CSS, e lekiloeng le ho lekoa ke limilione tsa batho. Empa, e boetse e entsoe ntle le likarolo tse ngata tsa sejoale-joale tsa CSS le mekhoa eo re e bonang ho libatli tse kang CSS Grid e ncha.
Kamoo e sebetsang kateng
Ka Bootstrap 5, re kentse khetho ea ho nolofalletsa sistimi e arohaneng ea grid e hahiloeng ho CSS Grid, empa ka Bootstrap twist. U ntse u fumana litlelase tseo u ka li sebelisang hang-hang ho haha meralo e arabelang, empa ka mokhoa o fapaneng tlas'a hood.
-
CSS Grid e khetha ho kena. Thibela gridi ea kamehla ka ho seta
$enable-grid-classes: false
le ho nolofalletsa CSS Grid ka ho seta$enable-cssgrid: true
. Ebe, kopanya Sass ea hau hape. -
Fetola mehlala
.row
ka.grid
. Sehlopha.grid
se behadisplay: grid
le ho thehagrid-template
seo u se hahang ka HTML ea hau. -
Fetola
.col-*
litlelase ka.g-col-*
litlelase. Lebaka ke hobane litšiea tsa rona tsa CSS Grid li sebelisagrid-column
thepa sebakeng sawidth
. -
Likholomo le boholo ba li-gutter li behoa ka mefuta e fapaneng ea CSS. Beha tsena ho motsoali
.grid
'me u iketsetse mokhoa oo u batlang ka oona, ka har'a line kapa ka mokhoa oa ho ngola, ka--bs-columns
le--bs-gap
.
Nakong e tlang, Bootstrap e tla fetohela ho tharollo ea lebasetere kaha gap
thepa e fihletse ts'ehetso e felletseng ea sebatli bakeng sa flexbox.
Liphapang tse ka sehloohong
Ha ho bapisoa le sistimi ea grid ea kamehla:
-
Lisebelisoa tsa Flex ha li ame likholomo tsa CSS Grid ka tsela e ts'oanang.
-
Likheo li nkela li-gutter sebaka. Thepa
gap
e nkela sebaka se otlolohilengpadding
ho tsoa ho sistimi ea rona ea kamehla mme e sebetsa joalo kamargin
. -
Ka hona, ho fapana le
.row
s,.grid
s ha e na meeli e fosahetseng 'me lisebelisoa tsa marang-rang li ke ke tsa sebelisoa ho fetola li-gutters tsa grid. Likheo tsa grid li sebelisoa ka mokhoa o otlolohileng le o otlolohileng ka mokhoa oa kamehla. Sheba karolo ea Customize bakeng sa lintlha tse ling. -
Litaele tse ka har'a mela le tse tloahelehileng li lokela ho talingoa e le tse nkang sebaka sa litlelase tsa ho fetola (mohlala,
style="--bs-columns: 3;"
khahlanoclass="row-cols-3"
le ). -
Nesting e sebetsa ka mokhoa o ts'oanang, empa e kanna ea hloka hore o hlophise bocha lipalo tsa kholumo ea hau ketsahalong ka 'ngoe ea sehlaha sa
.grid
. Sheba karolo ea lihlaha ho fumana lintlha.
Mehlala
Litšiea tse tharo
Likholomo tse tharo tse bophara bo lekanang libakeng tsohle tsa pono le lisebelisoa li ka etsoa ka ho sebelisa .g-col-4
lihlopha. Kenya litlelase tse arabelang ho fetola sebopeho ka boholo ba sebaka sa pono.
<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>
Ea arabelang
Sebelisa litlelase tsa batho ba arabelang ho fetola sebopeho sa hau ho libaka tsa ho shebella. Mona re qala ka litšiea tse peli libakeng tse tšesaane haholo tsa pono, ebe re hola ho fihla ho litšiea tse tharo ho lipono tse mahareng le holimo.
<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>
Bapisa seo le sebopeho sa likholomo tsena tse peli libakeng tsohle tsa pono.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Ho phuthela
Lintho tsa grid li iphuthela moleng o latelang ha ho se na sebaka se tšekaletseng. Hlokomela hore sena se gap
sebetsa ho likheo tse tšekaletseng le tse theohileng lipakeng tsa lintho tsa grid.
<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>
E qala
Litlelase tsa ho qala li ikemiselitse ho khutlisa litlelase tsa rona tsa grid ea kamehla, empa ha li tšoane ka ho felletseng. CSS Grid e theha template ea grid ka mekhoa e bolellang libatli ho "qala kholeng ena" le "qetella kholeng ena." Thepa tseo ke grid-column-start
le grid-column-end
. Litlelase tsa ho qala ke shorthand bakeng sa ea pele. Li kopane le lihlopha tsa kholomo ho ea ka boholo 'me u tsamaise likholomo tsa hau kamoo u hlokang kateng. Lithuto tsa ho qala li qala 1
joalo 0
ka boleng bo sa sebetseng ba thepa ena.
<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>
Litšiea tsa likoloi
Ha ho se na litlelase linthong tsa marang-rang (bana ba hang-hang ba .grid
), ntho e 'ngoe le e' ngoe ea grid e tla ikemela ho kholomo e le 'ngoe.
<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>
Boitšoaro bona bo ka kopanngoa le lihlopha tsa grid column.
<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>
Nesting
Joalo ka sistimi ea rona ea grid ea kamehla, Grid ea rona ea CSS e lumella hore ho be bonolo ho haha .grid
s. Leha ho le joalo, ho fapana le ea kamehla, grid ena e rua liphetoho meleng, likholomo le likheo. Nahana ka mohlala o ka tlase:
- Re fetisa palo e sa lekanyetsoang ea litšiea ka mofuta oa CSS oa lehae:
--bs-columns: 3
. - Kholomong ea pele e ikemetseng, palo ea kholomo e futsitsoe 'me kholomo ka 'ngoe ke karolo ea boraro ea bophara bo fumanehang.
- Kholomong ea bobeli ea auto, re seta bocha palo ea kholomo e behiloeng
.grid
ho 12 (ea rona ea kamehla). - Kholomo e iketsang ea boraro ha e na litaba tse hlahisitsoeng.
Ha e le hantle sena se lumella hore ho be le meralo e rarahaneng le e tloaelehileng ha e bapisoa le tsamaiso ea rona ea grid ea kamehla.
<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>
Ho iketsetsa
Iketsetse palo ea litšiea, palo ea mela, le bophara ba likheo ka mefuta e fapaneng ea CSS ea lehae.
E fetohang | Theko ea ho khutlela morao | Tlhaloso |
---|---|---|
--bs-rows |
1 |
Palo ea mela ho template ea grid ea hau |
--bs-columns |
12 |
Palo ea litšiea ho template ea grid ea hau |
--bs-gap |
1.5rem |
Boholo ba lekhalo lipakeng tsa likholomo (tse otlolohileng le tse tšekaletseng) |
Mefuta ena ea CSS ha e na boleng ba kamehla; ho e-na le hoo, ba sebelisa litekanyetso tsa morao-rao tse sebelisoang ho fihlela mohlala oa sebaka o fanoe. Mohlala, re sebelisa var(--bs-rows, 1)
bakeng sa melato ea CSS Grid, e iphapanyetsang --bs-rows
hobane ha e so hlophisoe kae kapa kae. Ha e se e le teng, .grid
mohlala o tla sebelisa boleng boo ho fapana le boleng ba fallback ba 1
.
Ha ho lihlopha tsa marang-rang
Likarolo tsa hang-hang tsa bana .grid
ke lisebelisoa tsa grid, kahoo li tla ba boholo ntle le ho eketsa .g-col
sehlopha ka ho hlaka.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Litšiea le likheo
Fetola palo ea litšiea le lekhalo.
<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>
Ho eketsa mela
Ho eketsa mela e meng le ho fetola sebaka sa likholomo:
<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>
Likheo
Fetola likheo tse otlolohileng feela ka ho fetola row-gap
. Hlokomela hore re sebelisa gap
ho .grid
s, empa row-gap
le column-gap
ka fetoloa ha ho hlokahala.
<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>
Ka lebaka leo, o ka ba le li-s tse fapaneng tse otlolohileng le tse rapameng gap
, tse ka nkang boleng bo le bong (mahlakore ohle) kapa para ea boleng (tse otlolohileng le tse rapameng). Sena se ka sebelisoa ka setaele sa inline bakeng sa gap
, kapa ka mofuta oa rona oa --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>
Sass
Moeli o le mong oa CSS Grid ke hore litlelase tsa rona tsa kamehla li ntse li hlahisoa ke mefuta e 'meli ea Sass, $grid-columns
le $grid-gutter-width
. Sena se rera esale pele palo ea litlelase tse hlahisitsoeng ho CSS ea rona e hlophisitsoeng. U na le likhetho tse peli mona:
- Fetola mefuta e sa fetoheng ea Sass 'me u boele u boele u bokelle CSS ea hau.
- Sebelisa mekhoa e ka hare kapa e tloaelehileng ho eketsa lihlopha tse fanoeng.
Mohlala, o ka eketsa palo ea litšiea le ho fetola boholo ba lekhalo, ebe o etsa boholo ba "likholomo" tsa hau ka motsoako oa li-styles tse ka har'a mela le lihlopha tse boletsoeng esale pele tsa CSS Grid (mohlala, .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>