CSS Grid
Lär dig hur du aktiverar, använder och anpassar vårt alternativa layoutsystem byggt på CSS Grid med exempel och kodavsnitt.
Bootstraps standardnätsystem representerar kulmen på över ett decennium av CSS-layouttekniker, beprövade och testade av miljontals människor. Men det skapades också utan många av de moderna CSS-funktioner och tekniker vi ser i webbläsare som det nya CSS Grid.
Hur det fungerar
Med Bootstrap 5 har vi lagt till alternativet att aktivera ett separat rutsystem som är byggt på CSS Grid, men med en Bootstrap-twist. Du får fortfarande klasser som du kan tillämpa på ett infall för att bygga responsiva layouter, men med ett annat tillvägagångssätt under huven.
-
CSS Grid är opt-in. Inaktivera standardrutnätssystemet genom att ställa in
$enable-grid-classes: false
och aktivera CSS-rutnätet genom att ställa in$enable-cssgrid: true
. Kompilera sedan om din Sass. -
Ersätt instanser av
.row
med.grid
. Klassen.grid
sätterdisplay: grid
och skapar engrid-template
som du bygger vidare på med din HTML. -
Byt ut
.col-*
klasser med.g-col-*
klasser. Detta beror på att våra CSS Grid-kolumner användergrid-column
egenskapen istället förwidth
. -
Kolumner och rännstorlekar ställs in via CSS-variabler. Ställ in dessa på föräldern
.grid
och anpassa hur du vill, inline eller i en stilmall, med--bs-columns
och--bs-gap
.
I framtiden kommer Bootstrap sannolikt att gå över till en hybridlösning eftersom gap
fastigheten har uppnått nästan fullt webbläsarstöd för flexbox.
Viktiga skillnader
Jämfört med standardnätsystemet:
-
Flex-verktyg påverkar inte CSS Grid-kolumnerna på samma sätt.
-
Luckor ersätter hängrännor. Egenskapen
gap
ersätter det horisontellapadding
från vårt standardnätsystem och fungerar mer sommargin
. -
Som sådan, till skillnad från
.row
s,.grid
har s inga negativa marginaler och marginalverktyg kan inte användas för att ändra rännorna. Rutnätsluckor tillämpas horisontellt och vertikalt som standard. Se anpassningssektionen för mer information. -
Inline och anpassade stilar bör ses som ersättningar för modifieringsklasser (t.ex.
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Kapsling fungerar på liknande sätt, men kan kräva att du återställer kolumnantal för varje instans av en kapslad
.grid
. Se kapslingssektionen för detaljer.
Exempel
Tre kolumner
Tre lika breda kolumner över alla vyportar och enheter kan skapas genom att använda .g-col-4
klasserna. Lägg till responsiva klasser för att ändra layouten efter visningsportstorlek.
<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>
Mottaglig
Använd responsiva klasser för att justera din layout över visningsportar. Här börjar vi med två kolumner på de smalaste vyportarna och växer sedan till tre kolumner på medelstora visningsportar och uppåt.
<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>
Jämför det med denna layout med två kolumner vid alla visningsportar.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Omslag
Rutnätsobjekt raderas automatiskt till nästa rad när det inte finns mer utrymme horisontellt. Observera att detta gap
gäller horisontella och vertikala mellanrum mellan rutnätsobjekt.
<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>
Startar
Startklasser syftar till att ersätta vårt standardnäts offsetklasser, men de är inte helt samma. CSS Grid skapar en rutnätsmall genom stilar som säger åt webbläsare att "börja vid den här kolumnen" och "sluta vid den här kolumnen." Dessa egenskaper är grid-column-start
och grid-column-end
. Startklasser är stenografi för de förstnämnda. Para ihop dem med kolumnklasserna efter storlek och anpassa dina kolumner hur du behöver. Startklasser börjar på 1
som 0
ett ogiltigt värde för dessa egenskaper.
<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>
Automatiska kolumner
När det inte finns några klasser på rutnätsobjekten (de omedelbara underordnade till en .grid
), kommer varje rutnätsobjekt automatiskt att dimensioneras till en kolumn.
<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>
Detta beteende kan blandas med kolumnklasser för rutnät.
<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>
Häckande
I likhet med vårt standardnätsystem tillåter vårt CSS Grid enkel kapsling av .grid
s. Men till skillnad från standarden ärver detta rutnät ändringar i rader, kolumner och luckor. Tänk på exemplet nedan:
- Vi åsidosätter standardantalet kolumner med en lokal CSS-variabel:
--bs-columns: 3
. - I den första autokolumnen ärvs kolumnantalet och varje kolumn är en tredjedel av den tillgängliga bredden.
- I den andra autokolumnen har vi återställt kolumnräkningen på de kapslade
.grid
till 12 (vår standard). - Den tredje autokolumnen har inget kapslat innehåll.
I praktiken möjliggör detta mer komplexa och anpassade layouter jämfört med vårt standardnätsystem.
<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>
Anpassa
Anpassa antalet kolumner, antalet rader och bredden på luckorna med lokala CSS-variabler.
Variabel | Reservvärde | Beskrivning |
---|---|---|
--bs-rows |
1 |
Antalet rader i din rutmönstermall |
--bs-columns |
12 |
Antalet kolumner i din rutnätsmall |
--bs-gap |
1.5rem |
Storleken på gapet mellan kolumner (vertikal och horisontell) |
Dessa CSS-variabler har inget standardvärde; istället tillämpar de reservvärden som används tills en lokal instans tillhandahålls. Till exempel använder vi var(--bs-rows, 1)
för våra CSS Grid-rader, som ignorerar --bs-rows
eftersom det inte har ställts in någonstans ännu. När det väl är det .grid
kommer instansen att använda det värdet istället för reservvärdet för 1
.
Inga rutnätsklasser
Omedelbara underordnade element i .grid
är rutnätsobjekt, så de kommer att dimensioneras utan att uttryckligen lägga till en .g-col
klass.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kolumner och luckor
Justera antalet kolumner och 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>
Lägger till rader
Lägga till fler rader och ändra placeringen av kolumner:
<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>
Luckor
Ändra endast de vertikala luckorna genom att modifiera row-gap
. Observera att vi använder gap
på .grid
s, men row-gap
och column-gap
kan ändras vid 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å grund av det kan du ha olika vertikala och horisontella gap
s, som kan ta ett enda värde (alla sidor) eller ett par värden (vertikalt och horisontellt). Detta kan tillämpas med en inline-stil för gap
, eller med vår --bs-gap
CSS-variabel.
<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 begränsning av CSS Grid är att våra standardklasser fortfarande genereras av två Sass-variabler $grid-columns
och $grid-gutter-width
. Detta förutbestämmer effektivt antalet klasser som genereras i vår kompilerade CSS. Du har två alternativ här:
- Ändra dessa standard Sass-variabler och kompilera om din CSS.
- Använd inline eller anpassade stilar för att utöka de angivna klasserna.
Du kan till exempel öka kolumnantalet och ändra mellanrumsstorleken och sedan storleksanpassa dina "kolumner" med en blandning av inline-stilar och fördefinierade CSS Grid-kolumnklasser (t.ex. .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>