CSS-rutenett

Bootstraps standard rutenettsystem representerer kulminasjonen av over et tiår med CSS-layoutteknikker, prøvd og testet av millioner av mennesker. Men den ble også laget uten mange av de moderne CSS-funksjonene og teknikkene vi ser i nettlesere som det nye CSS Grid.

Hvordan det fungerer

Med Bootstrap 5 har vi lagt til muligheten for å aktivere et eget grid-system som er bygget på CSS Grid, men med en Bootstrap-twist. Du får fortsatt klasser du kan bruke på et innfall for å bygge responsive layouter, men med en annen tilnærming under panseret.

• CSS Grid er opt-in. Deaktiver standard rutenettsystem ved å angi $enable-grid-classes: falseog aktiver CSS-rutenett ved å angi $enable-cssgrid: true. Deretter kompilerer du Sass på nytt.

• Erstatt forekomster av .rowmed .grid. Klassen .gridsetter display: gridog lager en grid-templatesom du bygger på med HTML-en din.

• Bytt ut .col-*klasser med .g-col-*klasser. Dette er fordi CSS Grid-kolonnene våre bruker grid-columnegenskapen i stedet for width.

• Kolonner og takrennestørrelser settes via CSS-variabler. Sett disse på overordnet .gridog tilpass slik du vil, inline eller i et stilark, med --bs-columnsog --bs-gap.

I fremtiden vil Bootstrap sannsynligvis gå over til en hybridløsning ettersom gapeiendommen har oppnådd nesten full nettleserstøtte for flexbox.

Viktige forskjeller

Sammenlignet med standard rutenettsystem:

• Flex-verktøy påvirker ikke CSS Grid-kolonnene på samme måte.

• Spalter erstatter takrenner. Eiendommen gaperstatter det horisontale paddingfra vårt standard rutenettsystem og fungerer mer som margin.

• Som sådan, i motsetning til .rows, .gridhar s ingen negative marginer og marginverktøy kan ikke brukes til å endre gitterrennene. Rutenettgap brukes horisontalt og vertikalt som standard. Se tilpasningsdelen for mer informasjon.

• Innebygde og egendefinerte stiler bør sees på som erstatninger for modifikatorklasser (f.eks. style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting fungerer på samme måte, men kan kreve at du tilbakestiller kolonneantallet for hver forekomst av en nestet .grid. Se hekkedelen for detaljer.

Eksempler

Tre kolonner

Tre like brede kolonner på tvers av alle visningsporter og enheter kan opprettes ved å bruke .g-col-4klassene. Legg til responsive klasser for å endre oppsettet etter visningsportstø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>

Mottakelig

Bruk responsive klasser for å justere oppsettet på tvers av visningsporter. Her starter vi med to kolonner på de smaleste visningsportene, og vokser deretter til tre kolonner på middels visningsporter og over.

<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 to-kolonneoppsettet ved alle visningsporter.

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

Innpakning

Rutenettelementer brytes automatisk til neste linje når det ikke er mer plass horisontalt. Merk at dette gapgjelder horisontale og vertikale avstander mellom rutenettelementer.

<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 tar sikte på å erstatte standardnettets offsetklasser, men de er ikke helt like. CSS Grid lager en rutenettmal gjennom stiler som forteller nettlesere å "starte ved denne kolonnen" og "slutte ved denne kolonnen." Disse egenskapene er grid-column-startog grid-column-end. Startklasser er stenografi for førstnevnte. Par dem med kolonneklassene etter størrelse og juster kolonnene slik du trenger. Startklasser begynner på 1som 0er en ugyldig verdi for disse egenskapene.

<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 det ikke er noen klasser på rutenettelementene (de umiddelbare barna til en .grid), vil hvert rutenettelement automatisk bli dimensjonert 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 oppførselen kan blandes med rutenettkolonneklasser.

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

Hekking

I likhet med vårt standard rutenettsystem, tillater vårt CSS-nett for enkel nesting av .grids. I motsetning til standarden, arver dette rutenettet imidlertid endringer i rader, kolonner og mellomrom. Tenk på eksemplet nedenfor:

• Vi overstyrer standard antall kolonner med en lokal CSS-variabel: --bs-columns: 3.
• I den første autokolonnen arves kolonnetellingen og hver kolonne er en tredjedel av den tilgjengelige bredden.
• I den andre autokolonnen har vi tilbakestilt kolonnetellingen på de nestede .gridtil 12 (standardinnstillingen vår).
• Den tredje autokolonnen har ikke noe nestet innhold.

I praksis tillater dette mer komplekse og tilpassede oppsett sammenlignet med vårt standard rutenettsystem.

<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

Tilpass antall kolonner, antall rader og bredden på hullene med lokale CSS-variabler.

Disse CSS-variablene har ingen standardverdi; i stedet bruker de reserveverdier som brukes til en lokal forekomst er oppgitt. For eksempel bruker vi var(--bs-rows, 1)for CSS Grid-radene våre, som ignorerer --bs-rowsfordi det ikke er satt noe sted ennå. Når den er det, vil .gridforekomsten bruke den verdien i stedet for reserveverdien til 1.

Ingen rutenettklasser

Umiddelbare underordnede elementer av .grider rutenettelementer, så de får størrelse uten å eksplisitt legge til 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 hull

Juster antall kolonner og gapet.

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

Legger til rader

Legge til flere rader og endre plassering av 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>

Gap

Endre de vertikale gapene bare ved å endre row-gap. Merk at vi bruker gappå .grids, men row-gapog column-gapkan endres etter 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å grunn av det kan du ha forskjellige vertikale og horisontale gaps, som kan ta en enkelt verdi (alle sider) eller et par verdier (vertikal og horisontal). Dette kan brukes med en innebygd stil for gap, eller med --bs-gapCSS-variabelen vår.

<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 begrensning ved CSS Grid er at standardklassene våre fortsatt genereres av to Sass-variabler, $grid-columnsog $grid-gutter-width. Dette forhåndsbestemmer effektivt antall klasser som genereres i vår kompilerte CSS. Du har to alternativer her:

• Endre de standard Sass-variablene og kompiler CSS-en på nytt.
• Bruk innebygde eller egendefinerte stiler for å utvide de angitte klassene.

Du kan for eksempel øke kolonneantallet og endre gapstørrelsen, og deretter dimensjonere "kolonnene" dine med en blanding av innebygde stiler og forhåndsdefinerte 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>