CSS Grid

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: falseoch aktivera CSS-rutnätet genom att ställa in $enable-cssgrid: true. Kompilera sedan om din Sass.

• Ersätt instanser av .rowmed .grid. Klassen .gridsätter display: gridoch skapar en grid-templatesom 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änder grid-columnegenskapen istället för width.

• Kolumner och rännstorlekar ställs in via CSS-variabler. Ställ in dessa på föräldern .gridoch anpassa hur du vill, inline eller i en stilmall, med --bs-columnsoch --bs-gap.

I framtiden kommer Bootstrap sannolikt att gå över till en hybridlösning eftersom gapfastigheten 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 gapersätter det horisontella paddingfrån vårt standardnätsystem och fungerar mer som margin.

• Som sådan, till skillnad från .rows, .gridhar 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;"vs class="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-4klasserna. Lägg till responsiva klasser för att ändra layouten efter visningsportstorlek.

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

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

Jämför det med denna layout med två kolumner vid alla visningsportar.

<div class="grid text-center">
  <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 gapgäller horisontella och vertikala mellanrum mellan rutnätsobjekt.

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

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-startoch 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å 1som 0ett ogiltigt värde för dessa egenskaper.

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

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

Detta beteende kan blandas med kolumnklasser för rutnät.

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

Häckande

I likhet med vårt standardnätsystem tillåter vårt CSS Grid enkel kapsling av .grids. 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 .gridtill 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 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>

Anpassa

Anpassa antalet kolumner, antalet rader och bredden på luckorna med lokala CSS-variabler.

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-rowseftersom det inte har ställts in någonstans ännu. När det väl är det .gridkommer 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-colklass.

<div class="grid text-center" 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 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>

Lägger till rader

Lägga till fler rader och ändra placeringen av kolumner:

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

Luckor

Ändra endast de vertikala luckorna genom att modifiera row-gap. Observera att vi använder gappå .grids, men row-gapoch column-gapkan ändras vid 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 av det kan du ha olika vertikala och horisontella gaps, 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-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 av CSS Grid är att våra standardklasser fortfarande genereras av två Sass-variabler $grid-columnsoch $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 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>