CSS-rutenett
Lær hvordan du aktiverer, bruker og tilpasser vårt alternative layoutsystem bygget på CSS Grid med eksempler og kodebiter.
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: false
og aktiver CSS-rutenett ved å angi$enable-cssgrid: true
. Deretter kompilerer du Sass på nytt. -
Erstatt forekomster av
.row
med.grid
. Klassen.grid
setterdisplay: grid
og lager engrid-template
som du bygger på med HTML-en din. -
Bytt ut
.col-*
klasser med.g-col-*
klasser. Dette er fordi CSS Grid-kolonnene våre brukergrid-column
egenskapen i stedet forwidth
. -
Kolonner og takrennestørrelser settes via CSS-variabler. Sett disse på overordnet
.grid
og tilpass slik du vil, inline eller i et stilark, med--bs-columns
og--bs-gap
.
I fremtiden vil Bootstrap sannsynligvis gå over til en hybridløsning ettersom gap
eiendommen 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
gap
erstatter det horisontalepadding
fra vårt standard rutenettsystem og fungerer mer sommargin
. -
Som sådan, i motsetning til
.row
s,.grid
har 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;"
vsclass="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-4
klassene. Legg til responsive klasser for å endre oppsettet etter visningsportstørrelse.
<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>
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">
<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">
<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 gap
gjelder horisontale og vertikale avstander mellom rutenettelementer.
<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>
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-start
og 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å 1
som 0
er en ugyldig verdi for disse egenskapene.
<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>
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">
<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">
<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 .grid
s. 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
.grid
til 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" 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.
Variabel | Reserveverdi | Beskrivelse |
---|---|---|
--bs-rows |
1 |
Antall rader i rutenettmalen |
--bs-columns |
12 |
Antall kolonner i rutenettmalen |
--bs-gap |
1.5rem |
Størrelsen på gapet mellom kolonnene (vertikalt og horisontalt) |
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-rows
fordi det ikke er satt noe sted ennå. Når den er det, vil .grid
forekomsten bruke den verdien i stedet for reserveverdien til 1
.
Ingen rutenettklasser
Umiddelbare underordnede elementer av .grid
er rutenettelementer, så de får størrelse uten å eksplisitt legge til en .g-col
klasse.
<div class="grid" 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" 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>
Legger til rader
Legge til flere rader og endre plassering av kolonner:
<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>
Gap
Endre de vertikale gapene bare ved å endre row-gap
. Merk at vi bruker gap
på .grid
s, men row-gap
og column-gap
kan endres etter behov.
<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>
På grunn av det kan du ha forskjellige vertikale og horisontale gap
s, 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-gap
CSS-variabelen vår.
<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
En begrensning ved CSS Grid er at standardklassene våre fortsatt genereres av to Sass-variabler, $grid-columns
og $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.
For eksempel kan du ø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" 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>