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.

Na dis pej

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.

Heads up—wi CSS Grid sistem na experimental ɛn opt-in as of v5.1.0! Wi bin put am insay wi dɔkyumentri in CSS fɔ sho am fɔ yu, bɔt i dɔn disable bay difɔlt. Kɔntinyu fɔ rid fɔ lan aw fɔ ɛnabul am na yu prɔjek dɛn.

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ɔ .rowwit .grid. Di .gridklas de sɛt display: gridɛn mek wan grid-templatewe 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 di grid-columnprɔ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 gapprɔ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 gapprɔpati de riples di ɔrizɔntal paddingfrɔm wi difɔlt grid sistem ɛn i de wok mɔ lɛk margin.
As a so, nɔ lɛk .rows, .grids 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;"vs class="row-cols-3").
Nesting 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-4klas dɛn. Ad klas dɛn we de ansa fɔ chenj di layout bay di sayz fɔ di viupɔt.

.g-kɔl-4

html na di pikchɔ

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

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 midul viupɔt dɛn ɛn ɔp.

.g-kol-6 .g-kol-md-4

html na di pikchɔ

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

Kɔmpia dat to dis tu kɔlɔm layout na ɔl di viupɔt dɛn.

.g-kɔl-6

html na di pikchɔ

<div class="grid text-center">
  <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 gapde aplay to ɔrizɔntal ɛn vertikal gap bitwin grid aytem dɛn.

.g-kɔl-6

html na di pikchɔ

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

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 brɔwza 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 1as 0na invalid valyu fɔ dɛn prɔpati ya.

.g-kol-3 .g-start-2

.g-kol-4 .g-start-6

html na di pikchɔ

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

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

1. Di wan dɛn we de

html na di pikchɔ

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

Dis bihayvya kin miks wit grid kɔlɔm klas dɛn.

.g-kɔl-6

1. Di wan dɛn we de

html na di pikchɔ

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

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 .grids. Bɔt dis grid nɔ tan lɛk di difɔlt, i kin gɛt chenj dɛn na di rɔw 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 .gridto 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.

Fɔs ɔto-kɔlɔm

Ɔto-kɔlɔm

Sɛkɔn ɔto-kɔlɔm

6 pan di 12

4 pan di 12

2 pan di 12

Tɔd ɔto-kɔlɔm

html na di pikchɔ

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

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-rowsbikɔs dɛn nɔ dɔn sɛt dat ɛnisay yet. Wans i dɔn bi, di .gridinstans go yuz da valyu de instead ɔf di fɔlbak valyu fɔ 1.

Nɔ grid klas dɛn nɔ de

Immediate pikin elements of .gridna grid aytem, so dem go bi saiz witout explicitly ad wan .g-colklas.

Ɔto-kɔlɔm

html na di pikchɔ

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

.g-kɔl-2

html na di pikchɔ

<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-kɔl-6

.g-kɔl-4

html na di pikchɔ

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

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:

Ɔto-kɔlɔm

html na di pikchɔ

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

Gap dɛn

Chenj di vertikal gap dɛn nɔmɔ bay we yu chenj di row-gap. Notis se wi de yuz gappan .grids, bɔt row-gapɛn column-gapwi kin chenj am as nid de.

.g-kɔl-6

html na di pikchɔ

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

Bikɔs ɔf dat, yu kin gɛt difrɛn vertikal ɛn ɔrizɔntal gaps, 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-gapCSS vɛriɔbul.

.g-kɔl-6

html na di pikchɔ

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

14 kɔlɔm dɛn

.g-kɔl-4

html na di pikchɔ

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