CSS Griy

Sistèm griy default Bootstrap reprezante akimilasyon plis pase yon deseni nan teknik layout CSS, te eseye ak teste pa dè milyon de moun. Men, li te kreye tou san anpil nan karakteristik ak teknik CSS modèn nou ap wè nan navigatè tankou nouvo Grid CSS la.

Ki jan li fonksyone

Avèk Bootstrap 5, nou te ajoute opsyon pou pèmèt yon sistèm kadriyaj separe ki bati sou CSS Grid, men ak yon tòde Bootstrap. Ou toujou jwenn klas ou ka aplike sou yon kapris yo bati kouman reponn, men ak yon apwòch diferan anba kapo a.

• CSS Grid se opt-in. Enfim sistèm kadriyaj default la lè w mete $enable-grid-classes: falseak pèmèt Grid CSS la lè w mete $enable-cssgrid: true. Lè sa a, rekonpile Sass ou a.

• Ranplase ka yo .rowak .grid. Klas .gridla etabli display: gridak kreye yon grid-templateke ou bati sou ak HTML ou.

• Ranplase .col-*klas yo ak .g-col-*klas yo. Sa a se paske kolòn CSS Grid nou yo itilize grid-columnpwopriyete a olye pou yo width.

• Gwosè kolòn ak goutyè yo mete atravè varyab CSS. Mete sa yo sou paran an .gridepi pèrsonalize jan ou vle, nan liy oswa nan yon fèy style, ak --bs-columnsak --bs-gap.

Nan lavni, Bootstrap ap gen chans pou chanje nan yon solisyon ibrid kòm gappwopriyete a te reyalize prèske tout sipò navigatè pou flexbox.

Diferans kle yo

Konpare ak sistèm griy default la:

• Itilite Flex pa afekte kolòn Grid CSS yo menm jan an.

• Gap ranplase goutyè yo. Pwopriyete gapa ranplase orizontal paddingnan sistèm kadriyaj default nou an ak fonksyone plis tankou margin.

• Kòm sa yo, kontrèman ak .rows, .grids pa gen okenn maj negatif ak sèvis piblik Marge pa ka itilize pou chanje goutyè yo kadriyaj. Diferans gri yo aplike orizontal ak vètikal pa default. Gade seksyon personnalisation pou plis detay.

• Styles Inline ak koutim yo ta dwe konsidere kòm ranplasman pou klas modifye (pa egzanp, style="--bs-columns: 3;"vs class="row-cols-3").

• Nidifikasyon travay menm jan an, men li ka mande pou ou retabli konte kolòn ou yo sou chak egzanp yon enbrike .grid. Gade seksyon an nidifikasyon pou plis detay.

Egzanp yo

Twa kolòn

Twa kolòn egal-lajè atravè tout fenèt ak aparèy yo ka kreye lè w itilize .g-col-4klas yo. Ajoute klas ki reponn pou chanje Layout a pa gwosè Viewport.

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

Reponn

Sèvi ak klas ki reponn pou ajiste layout ou atravè fenèt yo. Isit la nou kòmanse ak de kolòn sou vi ki pi etwat, ak Lè sa a, grandi nan twa kolòn sou pòtay mwayen ak pi wo a.

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

Konpare sa ak layout de kolòn sa a nan tout pòtay yo.

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

Anbalaj

Atik kadriyaj otomatikman vlope nan liy kap vini an lè pa gen plas plis orizontal. Remake byen ke a gapaplike a twou vid ki genyen orizontal ak vètikal ant atik kadriyaj.

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

Kòmanse

Klas Start yo vize ranplase klas konpanse griy default nou an, men yo pa totalman menm bagay la. CSS Grid kreye yon modèl kadriyaj atravè estil ki di navigatè yo "kòmanse nan kolòn sa a" ak "fini nan kolòn sa a." Pwopriyete sa yo se grid-column-startak grid-column-end. Klas kòmanse yo se kout pou ansyen an. Pè yo ak klas kolòn yo pou gwosè ak aliman kolòn ou yo sepandan ou bezwen. Kòmanse klas yo kòmanse nan 1jan 0se yon valè envalid pou pwopriyete sa yo.

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

Kolòn oto

Lè pa gen klas sou atik kadriyaj yo (pitit imedya yon .grid), chak atik kadriyaj yo pral otomatikman gwosè yon kolòn.

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

Konpòtman sa a ka melanje ak klas kolòn kadriyaj.

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

Nidifikasyon

Menm jan ak sistèm kadriyaj default nou an, Grid CSS nou an pèmèt nidifikasyon fasil nan .grids. Sepandan, kontrèman ak default a, kadriyaj sa a eritye chanjman nan ranje yo, kolòn, ak twou vid ki genyen. Konsidere egzanp ki anba a:

• Nou pase sou kantite kolòn default yo ak yon varyab lokal CSS: --bs-columns: 3.
• Nan premye kolòn oto-a, konte kolòn nan eritye epi chak kolòn se yon tyè nan lajè ki disponib.
• Nan dezyèm kolòn oto-a, nou te retabli konte kolòn nan enbrike .grida 12 (defo nou an).
• Twazyèm oto-kolòn pa gen okenn kontni anbrike.

Nan pratik sa a pèmèt pou plis konplèks ak koutim layouts lè yo konpare ak sistèm kadriyaj default nou an.

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

Pèrsonalizasyon

Customize kantite kolòn, kantite ranje, ak lajè twou vid ki genyen yo ak varyab CSS lokal yo.

Varyab CSS sa yo pa gen okenn valè default; olye de sa, yo aplike valè repli ke yo itilize jiskaske yo bay yon egzanp lokal yo. Pou egzanp, nou itilize var(--bs-rows, 1)pou ranje CSS Grid nou an, ki inyore --bs-rowspaske sa pa te mete nenpòt kote ankò. Yon fwa li se, .gridegzanp lan pral sèvi ak valè sa a olye pou yo valè repli nan 1.

Pa gen klas griy

Eleman timoun imedyat nan .gridyo se atik kadriyaj, kidonk yo pral gwosè san yo pa ajoute klèman yon .g-colklas.

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

Kolòn ak twou vid ki genyen

Ajiste kantite kolòn ak diferans lan.

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

Ajoute ranje

Ajoute plis ranje ak chanje plasman kolòn yo:

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

Diferans

Chanje diferans vètikal yo sèlman lè w modifye row-gap. Remake byen ke nou itilize gapsou .grids, men row-gapepi column-gapyo ka modifye jan sa nesesè.

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

Poutèt sa, ou ka gen diferan vètikal ak orizontal gaps, ki ka pran yon valè sèl (tout kote) oswa yon pè nan valè (vètikal ak orizontal). Sa a ka aplike ak yon style inline pou gap, oswa ak --bs-gapvaryab CSS nou an.

<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

Youn nan limit CSS Grid la se ke klas default nou yo toujou pwodwi pa de varyab Sass, $grid-columnsak $grid-gutter-width. Sa a efektivman predetèmine kantite klas ki pwodwi nan CSS konpile nou an. Ou gen de opsyon isit la:

• Modifye varyab Sass default sa yo epi rekonpile CSS ou a.
• Sèvi ak estil enline oswa koutim pou ogmante klas yo bay yo.

Pou egzanp, ou ka ogmante konte kolòn nan epi chanje gwosè espas sa a, ak Lè sa a, gwosè "kolòn" ou yo ak yon melanj de estil inline ak klas kolòn CSS Grid predefini (egzanp, .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>