CSS Grid fɔ di Baybul
Lan aw fɔ ɛnabul, yuz, ɛn kɔstɔmayz wi ɔda layout sistem we dɛn bil pan CSS Grid wit ɛgzampul dɛn ɛn kɔd snipɛt dɛn.
Bootstrap in difɔlt grid sistem ripresent di kulminɛshɔn fɔ ɔva wan tɛn ia CSS layout tɛknik dɛn, we bɔku bɔku pipul dɛn dɔn tray ɛn tɛst. Bɔt, dɛn bin mek am bak witout bɔku pan di mɔdan CSS ficha ɛn tɛknik dɛn we wi de si na brawza dɛn lɛk di nyu CSS Grid.
Aw i de wok
Wit Bootstrap 5, wi dɔn ad di opshɔn fɔ ɛnabul wan sɛpret grid sistem we dɛn bil pan CSS Grid, bɔt wit wan Bootstrap twist. Yu stil gɛt klas dɛn we yu kin aplay pan wan whim fɔ bil layout dɛn we de ansa, bɔt wit difrɛn we fɔ du tin ɔnda di hud.
-
CSS Grid na fɔ opt-in. Disable di difɔlt grid sistem bay we yu sɛt
$enable-grid-classes: false
ɛn ɛnabul di CSS Grid bay we yu sɛt$enable-cssgrid: true
. Den, recompile yu Sass. -
Riples instans dɛn fɔ
.row
wit.grid
. Di.grid
klas de sɛtdisplay: grid
ɛn mek wangrid-template
we yu bil pan wit yu HTML. -
Riples di
.col-*
klas dɛn wit.g-col-*
klas dɛn. Dis na bikɔs wi CSS Grid kɔlɔm dɛn de yuz digrid-column
prɔpati instead fɔwidth
. -
Kɔlɔm ɛn gɔta saiz dɛn de sɛt via CSS vɛriɔbul dɛn. Sɛt dɛn wan ya na di mama ɔ papa
.grid
ɛn kɔstɔmayz aw yu want, insay layn ɔ insay wan staylshit, wit--bs-columns
ɛn--bs-gap
.
Insay di fyuchu, Bootstrap go mɔs shift to wan haybrid sɔlvishɔn as di gap
prɔpati dɔn ajɔst nia ful brawza sɔpɔt fɔ flexbox.
Di men tin dɛn we difrɛn
We yu kɔmpia am wit di difɔlt grid sistem:
-
Fleks yutiliti dɛn nɔ de afɛkt di CSS Grid kɔlɔm dɛn di sem we.
-
Gaps de tek ples fɔ di gɔta dɛn. Di
gap
prɔpati de riples di ɔrizɔntalpadding
frɔm wi difɔlt grid sistem ɛn i de wok mɔ lɛkmargin
. -
As a so, nɔ lɛk
.row
s,.grid
s nɔ gɛt nɛgitiv margin ɛn dɛn nɔ kin yuz margin yutiliti fɔ chenj di grid gɔta dɛn. Grid gap dɛn de aplay ɔrizɔntal ɛn vertikal bay difɔlt. Si di say we se fɔ kɔstɔmayt fɔ no mɔ. -
Inlayn ɛn kɔstɔm stayl dɛn fɔ si as riplesmɛnt fɔ modifya klas dɛn (ɛgz.,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nest de wok di sem we, bɔt i kin nid fɔ mek yu riset yu kɔlɔm kɔnt pan ɛni instans fɔ wan nest
.grid
. Si di say we se fɔ mek dɛn nɛst fɔ no mɔ bɔt dis.
Ɛgzampul dɛn
Tri kɔlɔm dɛn
Yu kin mek tri ikwal-wid kɔlɔm dɛn akɔdin to ɔl di viupɔt ɛn divays dɛn bay we yu yuz di .g-col-4
klas dɛn. Ad klas dɛn we de ansa fɔ chenj di layout bay di sayz fɔ di viupɔt.
<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>
Fɔ ansa
Yuz klas dɛn we de ansa fɔ ajɔst yu layout akɔdin to di viupɔt dɛn. Na ya wi de stat wit tu kɔlɔm dɛn na di smɔl smɔl viupɔt dɛn, ɛn afta dat wi de gro to tri kɔlɔm dɛn na di midul viupɔt dɛn ɛn ɔp.
<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>
Kɔmpia dat to dis tu kɔlɔm layout na ɔl di viupɔt dɛn.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
We dɛn de rap
Grid aytem dɛn kin rap ɔtomɛtik wan to di nɛks layn we nɔ gɛt mɔ rum ɔrizɔntal wan. Notis se di gap
de aplay to ɔrizɔntal ɛn vertikal gap dɛn bitwin di grid aytem dɛn.
<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>
I de stat fɔ du dat
Start klas dɛn aim fɔ riples wi difɔlt grid in ɔfset klas dɛn, bɔt dɛn nɔto di sem ɔl. CSS Grid de mek wan grid tɛmplat tru stayl dɛn we de tɛl brawza dɛn fɔ “start na dis kɔlɔm” ɛn “ɛnd na dis kɔlɔm.” Dɛn prɔpati dɛn de na grid-column-start
ɛn grid-column-end
. Start klas dɛn na shɔthand fɔ di fɔs wan. Pe dɛn wit di kɔlɔm klas dɛn fɔ saiz ɛn alaynɛt yu kɔlɔm dɛn aw yu nid. Start klas dɛn bigin na 1
as 0
na invalid valyu fɔ dɛn prɔpati ya.
<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>
Ɔto kɔlɔm dɛn
We no klas nɔ de na di grid aytem dɛn (di pikin dɛn we de nia wan .grid
), ɛni grid aytem go ɔtomɛtik saiz to wan kɔlɔm.
<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>
Dis bihayvya kin miks wit grid kɔlɔm klas dɛn.
<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>
Fɔ mek dɛn nɛst
Semweso lɛk wi difɔlt grid sistem, wi CSS Grid de alaw fɔ mek i izi fɔ mek .grid
s. Bɔt dis grid nɔ tan lɛk di difɔlt, i kin gɛt chenj dɛn na di row dɛn, di kɔlɔm dɛn, ɛn di gap dɛn. Tink bɔt di ɛgzampul we de dɔŋ ya:
- Wi de ɔvalayz di difɔlt nɔmba fɔ di kɔlɔm dɛn wit wan lokal CSS vɛriɔbul:
--bs-columns: 3
. - Insay di fɔs ɔto-kɔlɔm, di kɔlɔm kɔnt de inhɛrit ɛn ɛni kɔlɔm na wan-tɛd pan di wit we de.
- Insay di sɛkɔn ɔto-kɔlɔm, wi dɔn riset di kɔlɔm kɔnt na di nest
.grid
to 12 (wi difɔlt). - Di tɔd ɔto-kɔlɔm nɔ gɛt ɛnitin we dɛn dɔn nest.
Insay prɔsis dis de alaw fɔ mek mɔ kɔmpleks ɛn kɔstɔm layout dɛn we yu kɔmpia am wit wi difɔlt grid sistɛm.
<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>
Fɔ kɔstɔmayt
Kastamayz di nɔmba fɔ di kɔlɔm dɛn, di nɔmba fɔ di row dɛn, ɛn di wit fɔ di gap dɛn wit lokal CSS vɛriɔbul dɛn.
Di tin dɛn we kin chenj | Fɔl bak valyu | Tɔk bɔt |
---|---|---|
--bs-rows |
1 |
Di nɔmba fɔ di row dɛn na yu grid tɛmplat |
--bs-columns |
12 |
Di nɔmba fɔ di kɔlɔm dɛn na yu grid tɛmplat |
--bs-gap |
1.5rem |
Di sayz fɔ di gap bitwin di kɔlɔm dɛn (vɛtikal ɛn ɔrizɔntal) . |
Dɛn CSS vɛriɔbul dɛn ya nɔ gɛt difɔlt valyu; bifo dat, dɛn de yuz fɔl bak valyu dɛn we dɛn kin yuz te dɛn gi wan lokal instans. Fɔ ɛgzampul, wi de yuz var(--bs-rows, 1)
fɔ wi CSS Grid row dɛn, we nɔ de tek tɛm --bs-rows
bikɔs dɛn nɔ dɔn sɛt dat ɛnisay yet. Wans i dɔn bi, di .grid
instans go yuz da valyu de instead ɔf di fɔlbak valyu fɔ 1
.
Nɔ grid klas dɛn nɔ de
Immediate pikin elements of .grid
na grid aytem, so dem go bi saiz witout explicitly ad wan .g-col
klas.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kɔlɔm ɛn gap dɛn
Ajɔst di nɔmba fɔ di kɔlɔm dɛn ɛn di gap.
<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>
We dɛn de ad row dɛn
Fɔ ad mɔ row dɛn ɛn chenj di say we dɛn put di kɔlɔm dɛn:
<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>
Gap dɛn
Chenj di vertikal gap dɛn nɔmɔ bay we yu chenj di row-gap
. Notis se wi de yuz gap
pan .grid
s, bɔt row-gap
ɛn column-gap
wi kin chenj am as nid de.
<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>
Bikɔs ɔf dat, yu kin gɛt difrɛn vertikal ɛn ɔrizɔntal gap
s, we kin tek wan valyu (ɔl sayd) ɔ wan pe valyu (vɛtikal ɛn ɔrizɔntal). Dis kin aplay wit wan inlayn stayl fɔ gap
, ɔ wit wi --bs-gap
CSS vɛriɔbul.
<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 we bin de
Wan limiteshɔn fɔ di CSS Grid na dat wi difɔlt klas dɛn stil de jenarayz bay tu Sass vɛriɔbul dɛn, $grid-columns
ɛn $grid-gutter-width
. Dis kin rili disayd di nɔmba fɔ di klas dɛn we dɛn dɔn mek na wi CSS we wi dɔn kɔmpilayt. Yu gɛt tu tin dɛn fɔ du na ya:
- Modify dɛn difɔlt Sass vɛriɔbul dɛn de ɛn rikompayl yu CSS.
- Yuz inlayn ɔ kɔstɔm stayl dɛn fɔ mek di klas dɛn we dɛn gi yu, bɔku.
Fɔ ɛgzampul, yu kin inkrisayz di kɔlɔm kɔnt ɛn chenj di gap saiz, ɛn afta dat yu kin saiz yu “kɔlɔm dɛn” wit miks inlayn stayl ɛn prɛdifayn CSS Grid kɔlɔm klas dɛn (ɛgz., .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>