CSS Grid

Bootstraps standard gittersystem repræsenterer kulminationen på over et årti af CSS-layoutteknikker, afprøvet og testet af millioner af mennesker. Men det blev også skabt uden mange af de moderne CSS-funktioner og -teknikker, vi ser i browsere som det nye CSS Grid.

Hvordan det virker

Med Bootstrap 5 har vi tilføjet muligheden for at aktivere et separat gittersystem, der er bygget på CSS Grid, men med et Bootstrap-twist. Du får stadig klasser, du kan anvende på et indfald til at bygge responsive layouts, men med en anden tilgang under motorhjelmen.

• CSS Grid er opt-in. Deaktiver standardgittersystemet ved at indstille $enable-grid-classes: falseog aktiver CSS-gitteret ved at indstille $enable-cssgrid: true. Genkompilér derefter din Sass.

• Erstat forekomster af .rowmed .grid. Klassen .gridsætter display: gridog skaber en grid-template, som du bygger videre på med din HTML.

• Erstat .col-*klasser med .g-col-*klasser. Dette skyldes, at vores CSS Grid-kolonner bruger grid-columnegenskaben i stedet for width.

• Kolonner og rendestørrelser indstilles via CSS-variabler. Indstil disse på forælderen .gridog tilpas, som du vil, inline eller i et stylesheet, med --bs-columnsog --bs-gap.

I fremtiden vil Bootstrap sandsynligvis skifte til en hybridløsning, da gapejendommen har opnået næsten fuld browserunderstøttelse til flexbox.

Nøgleforskelle

Sammenlignet med standardnetsystemet:

• Flex-værktøjer påvirker ikke CSS Grid-kolonnerne på samme måde.

• Huller erstatter tagrender. Ejendommen gaperstatter det vandrette paddingfra vores standard gittersystem og fungerer mere som margin.

• Som sådan, i modsætning til .rows, .gridhar s ingen negative marginer, og marginværktøjer kan ikke bruges til at ændre gitterrenderne. Gittermellemrum anvendes som standard vandret og lodret. Se afsnittet om tilpasning for flere detaljer.

• Inline og brugerdefinerede stilarter skal ses som erstatninger for modifikatorklasser (f.eks. style="--bs-columns: 3;"vs class="row-cols-3").

• Indlejring fungerer på samme måde, men kan kræve, at du nulstiller dit kolonneantal for hver forekomst af en indlejret .grid. Se indlejringsafsnittet for detaljer.

Eksempler

Tre søjler

Tre kolonner med samme bredde på tværs af alle visningsporte og enheder kan oprettes ved at bruge .g-col-4klasserne. Tilføj responsive klasser for at ændre layoutet efter viewportstørrelse.

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

Lydhør

Brug responsive klasser til at justere dit layout på tværs af visningsporte. Her starter vi med to kolonner på de smalleste visningsporte, og vokser derefter til tre kolonner på mellemstore visningsporte og derover.

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

Sammenlign det med dette layout med to kolonner ved alle visningsporte.

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

Indpakning

Gitterelementer ombrydes automatisk til næste linje, når der ikke er mere plads vandret. Bemærk, at dette gapgælder for vandrette og lodrette mellemrum mellem gitterelementer.

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

Starter

Startklasser sigter mod at erstatte vores standardgitters offsetklasser, men de er ikke helt ens. CSS Grid opretter en gitterskabelon gennem stilarter, der fortæller browsere at "starte ved denne kolonne" og "slutte ved denne kolonne." Disse egenskaber er grid-column-startog grid-column-end. Startklasser er stenografi for førstnævnte. Par dem med kolonneklasserne efter størrelse og juster dine kolonner, som du har brug for. Startklasser begynder ved 1som 0en ugyldig værdi for disse egenskaber.

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

Automatiske kolonner

Når der ikke er klasser på gitterelementerne (de umiddelbare børn af en .grid), vil hvert gitterelement automatisk blive dimensioneret til én kolonne.

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

Denne adfærd kan blandes med gitterkolonneklasser.

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

Indlejring

I lighed med vores standardgittersystem giver vores CSS Grid mulighed for nem indlejring af .grids. Men i modsætning til standarden, arver dette gitter ændringer i rækker, kolonner og mellemrum. Overvej eksemplet nedenfor:

• Vi tilsidesætter standardantallet af kolonner med en lokal CSS-variabel: --bs-columns: 3.
• I den første auto-kolonne nedarves kolonneantallet, og hver kolonne er en tredjedel af den tilgængelige bredde.
• I den anden autokolonne har vi nulstillet kolonneantallet på de indlejrede .gridtil 12 (vores standard).
• Den tredje autokolonne har intet indlejret indhold.

I praksis giver dette mulighed for mere komplekse og brugerdefinerede layouts sammenlignet med vores standard gittersystem.

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

Tilpasning

Tilpas antallet af kolonner, antallet af rækker og bredden af ​​hullerne med lokale CSS-variabler.

Disse CSS-variabler har ingen standardværdi; i stedet anvender de reserveværdier, der bruges, indtil der leveres en lokal instans. For eksempel bruger vi var(--bs-rows, 1)til vores CSS Grid rækker, som ignorerer --bs-rows, fordi det ikke er blevet sat nogen steder endnu. Når det er tilfældet, .gridvil instansen bruge denne værdi i stedet for reserveværdien for 1.

Ingen gitterklasser

Umiddelbare underordnede elementer af .grider gitterelementer, så de får størrelse uden eksplicit at tilføje en .g-colklasse.

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

Kolonner og huller

Juster antallet af kolonner og mellemrummet.

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

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

Tilføjelse af rækker

Tilføjelse af flere rækker og ændring af placeringen af ​​kolonner:

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

Huller

Skift kun de lodrette mellemrum ved at ændre row-gap. Bemærk at vi bruger gappå .grids, men row-gapog column-gapkan ændres efter behov.

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

På grund af det kan du have forskellige lodrette og vandrette gaps, som kan tage en enkelt værdi (alle sider) eller et par værdier (lodret og vandret). Dette kan anvendes med en inline-stil for gap, eller med vores --bs-gapCSS-variabel.

<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

En begrænsning ved CSS Grid er, at vores standardklasser stadig genereres af to Sass-variabler $grid-columnsog $grid-gutter-width. Dette forudbestemmer effektivt antallet af klasser genereret i vores kompilerede CSS. Du har to muligheder her:

• Rediger disse standard Sass-variabler, og kompiler din CSS igen.
• Brug inline eller brugerdefinerede stilarter til at udvide de angivne klasser.

For eksempel kan du øge kolonneantallet og ændre mellemrummets størrelse og derefter dimensionere dine "kolonner" med en blanding af inline-stile og foruddefinerede CSS Grid-kolonneklasser (f.eks. .g-col-4).

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