Grille ya CSS

Yekola ndenge ya kofungola, kosalela, mpe kobongisa système na biso ya layout alternatif oyo etongami na CSS Grid na bandakisa mpe biteni ya code.

Na lokasa oyo

Système ya grille par défaut ya Bootstrap ezali komonisa culmination ya plus de décennie ya ba techniques ya layout ya CSS, oyo emekamaki mpe emekamaki na ba millions ya batu. Kasi, esalemaki mpe kozanga mingi ya makambo mpe mayele ya CSS ya mikolo oyo tozali komona na ba navigateurs lokola Grille ya sika ya CSS.

Mitó likoló —système na biso ya CSS Grid ezali ya komeka mpe ya kopona kobanda na v5.1.0! Tokotisaki yango na CSS ya mikanda na biso mpo na kolakisa yango mpo na yo, kasi ekangami na ndenge ya libela. Koba kotanga po oyeba ndenge nini okoki ko activer yango na ba projets na yo.

Ndenge oyo esalaka

Na Bootstrap 5, tobakisi option ya ko activer système ya grille separate oyo etongami na CSS Grid, kasi na twist ya Bootstrap. Ozuaka kaka ba classes okoki ko appliquer na caprice pona kotonga ba layouts responsives, mais na approche différente na se ya capote.

CSS Grid ezali opt-in. Désactiver système ya grille par défaut na ko setting $enable-grid-classes: falsempe ko activer Grille ya CSS na ko setting $enable-cssgrid: true. Na sima, recompiler Sass na yo.
Bozongisa ba instances ya .rowna .grid. Kelasi .gridetie display: gridmpe esali a grid-templateoyo ozali kotonga likolo na yango na HTML na yo.
Bozongisa .col-*bakelasi na esika ya .g-col-*bakelasi. Yango ezali mpo ete ba colonne na biso ya Grille CSS esalelaka grid-columnpropriété na esika ya width.
Ba colonnes na ba taille ya gouttière etiamaki na nzela ya ba variables CSS. Botia oyo na moboti .gridmpe bobongisa ndenge nini bolingi, na kati to na lokasa ya lolenge, na --bs-columnsmpe --bs-gap.

Na mikolo mizali koya, Bootstrap ekobaluka mbala mosusu na solution hybride lokola gappropriété ekokisaki pene na lisungi mobimba ya navigateur mpo na flexbox.

Bokeseni ya ntina

Soki tokokanisi yango na système ya grille par défaut:

Ba utilitaires Flex ezo affecter ba colonnes ya Grille CSS na ndenge moko te.
Ba gaps ezo remplacer ba gouttières. Propriété gapezo remplacer horizontal paddingà partir ya système na biso ya grille par défaut pe ezo fonctionner mingi lokola margin.
Lokola yango, na bokeseni na .rows, .grids ezali na ba marges négatives te mpe ba utilitaires ya marge ekoki kosalelama te mpo na kobongola ba gouttières ya grille. Ba espaces ya grille esalemaka horizontalement na verticalement par défaut. Tala eteni ya kosala personnalisation mpo na koyeba makambo mosusu.
Esengeli kotala ba styles ya kati mpe ya personnalisé lokola ba remplacements ya ba classes ya modificateur (ndakisa, style="--bs-columns: 3;"vs class="row-cols-3").
Nesting esalaka ndenge moko, kasi ekoki kosenga yo o réinitialiser ba comptes ya colonne na yo na instance moko na moko ya nested .grid. Tala eteni ya kosala zumbu mpo na koyeba makambo mosusu.

Bandakisa

Makonzí misato

Ba colonnes misato ya bonene ekokani na kati ya ba portes de vue nionso mpe ba appareils ekoki kosalama na kosalelaka ba .g-col-4classes. Bakisa ba classes oyo ezo répondre pona ko changer layout na taille ya viewport.

.g-kolo-4

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

Koyanola

Salelá bakelasi oyo ezali koyanola mpo na kobongisa mabongisi na yo na kati ya bisika ya kotala. Awa tobandi na makonzí mibale na ba portes de vue oyo eleki moke, mpe na nsima tokoli kino na makonzí misato na ba portes de vue ya moyenne mpe likolo.

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

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

Kokanisá yango na ebongiseli oyo ya makonzí mibale na bisika nyonso ya kotala.

.g-kolo-6

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

Kozipa nzoto

Biloko ya grille ezo envelopper automatiquement na ligne oyo elandi tango esika ezali lisusu te horizontalement. Simbá ete oyo gapetali ba espaces horizontales mpe verticales kati na biloko ya grille.

.g-kolo-6

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

Ebandi

Ba classes ya début ezali na tina ya ko remplacer ba classes ya offset ya grille par défaut na biso, mais ezali entièrement ndenge moko te. CSS Grid esalaka modèle ya grille na nzela ya ba styles oyo eyebisaka ba navigateurs “banda na colonne oyo” mpe “esuka na colonne oyo.” Biloko wana ezali grid-column-startmpe grid-column-end. Ba kelasi ya kobanda ezali stenographie mpo na oyo ya liboso. Pair bango na ba classes ya colonne na taille pe aligner ba colonnes na yo cependant oza na besoin. Ba classes ya kobanda ebandi na 1ndenge 0ezali valeur ya mabe pona ba propriétés oyo.

.g-col-3 .g-kobanda-2

.g-col-4 .g-kobanda-6

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

Ba colonnes ya automatique

Ntango bakelasi ezali te na biloko ya grille (bana ya mbala moko ya a .grid), eloko moko na moko ya grille ekozala na bonene ya automatique na colonne moko.

1. 1.

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

Comportement oyo ekoki kosangisama na ba classes ya colonne ya grille.

.g-kolo-6

1. 1.

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

Kosala zumbu

Ndenge moko na système na biso ya grille par défaut, Grille na biso ya CSS epesaka nzela ya kosala nesting ya pete ya .grids. Kasi, na bokeseni na oyo ya liboso, grille oyo ezwaka mbongwana na milɔngɔ, makonzí, mpe bisika oyo ezali na esika te. Tótalela ndakisa oyo ezali awa na nse:

Tozali ko superposer nombre ya ba colonnes par défaut na variable CSS locale: --bs-columns: 3.
Na auto-colon ya liboso, motango ya makonzí ezwamaka na libula mpe colonne moko na moko ezali moko na misato ya bonene oyo ezali.
Na auto-colon ya mibale, to réinitialiser compte ya colonne na nested .gridna 12 (par défaut na biso).
Auto-colonne ya misato ezali na contenus nested te.

Na pratique yango epesaka nzela na ba layouts complexes mpe personnalisés mingi soki tokokanisi yango na système na biso ya grille par défaut.

Kolona ya liboso ya automatique

Kolona ya automatique

Kolona ya mibale ya automatique

6 ya 12

4 ya 12

2 ya 12

Kolona ya misato ya automatique

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

Kosala na ndenge ya moto ye moko

Personnaliser nombre ya ba colonnes, nombre ya ba lignes, na largeur ya ba espaces na ba variables ya CSS local.

Variable oyo ekoki kobongwana	Valeur ya Fallback	Ndimbola
`--bs-rows`	`1`	Motango ya milɔngɔ́ na kati ya modèle ya grille na yo
`--bs-columns`	`12`	Motango ya makonzí na modèle ya grille na yo
`--bs-gap`	`1.5rem`	Bonene ya esika oyo ezali kati na makonzí (vertical mpe horizontal) .

Ba variables oyo ya CSS ezali na valeur par défaut te; na esika na yango, basalelaka ba valeurs ya fallback oyo esalelamaka tii tango instance ya esika ekopesama. Ndakisa, tosalelaka var(--bs-rows, 1)mpo na milɔngɔ́ na biso ya CSS Grid, oyo ezali koboya --bs-rowsmpo ete yango etyami naino esika moko te. Soki esalemi, .gridinstance ekosalela motuya wana na esika ya motuya ya fallback ya 1.

Ba classes ya grille te

Bana ya mbala moko ba éléments ya .gridezali biloko ya grille, yango wana bakozala na taille sans explicitement kobakisa .g-colclasse.

Kolona ya automatique

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

Ba colonnes na ba espaces

Bongisá motángo ya makonzí mpe esika oyo ezali.

.g-kolo-2

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

.g-kolo-6

.g-kolo-4

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

Kobakisa milɔngɔ́

Kobakisa milɔngɔ́ mosusu mpe kobongola esika ya kotya makonzí:

Kolona ya automatique

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

Bisika oyo ezali na esika te

Bobongola ba espaces verticales kaka na ko modifier ba row-gap. Simbá ete tosalelaka gapna .grids, kasi row-gapmpe column-gapekoki kobongisama soki esengeli.

.g-kolo-6

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

Na tina ya yango, okoki kozala na gaps vertical na horizontal ekeseni, oyo ekoki kozua valeur moko (ba côtés nionso) to paire ya valeurs (vertical na horizontal). Yango ekoki kosalelama na style ya inline mpo na gap, to na --bs-gapvariable na biso ya CSS.

.g-kolo-6

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

Limite moko ya Grille CSS ezali ete ba classes na biso ya défaut ezali kaka ko generer na ba variables mibale ya Sass, $grid-columnsmpe $grid-gutter-width. Yango e déterminaka efficacement nombre ya ba classes oyo esalemi na CSS na biso compilé. Ozali na ba options mibale awa:

Modifier ba variables wana ya Sass par défaut mpe recompiler CSS na yo.
Salelá ba styles ya inline to ya personnalisé mpo na kobakisa ba classes oyo epesami.

Ndakisa, okoki komatisaka motango ya makonzí mpe kobongola bonene ya esika ya esika, mpe na nsima bonene ya “makonzí” na yo na kosangisa ya mitindo ya kati mpe bakelasi ya makonzí ya CSS Grid oyo esili kolimbolama liboso (ndakisa, .g-col-4).

14 makonzí

.g-kolo-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>