CSS Grid

Het standaard grid-systeem van Bootstrap is het resultaat van meer dan tien jaar CSS-layouttechnieken, beproefd door miljoenen mensen. Maar het is ook ontstaan zonder veel van de moderne CSS-functionaliteiten en -technieken die we nu in browsers zien, zoals het nieuwe CSS Grid.

Hoe het werkt

Met Bootstrap 5 hebben we de mogelijkheid toegevoegd om een apart grid-systeem in te schakelen dat op CSS Grid is gebouwd, maar met een Bootstrap-tintje. Je krijgt nog steeds klassen die je naar believen kunt toepassen om responsieve layouts te bouwen, maar met een andere aanpak onder de motorkap.

• CSS Grid is opt-in. Schakel het standaard grid-systeem uit door $enable-grid-classes: false in te stellen en schakel CSS Grid in door $enable-cssgrid: true in te stellen. Compileer daarna je Sass opnieuw.

• Vervang instanties van .row door .grid. De klasse .grid zet display: grid en maakt een grid-template waarop je met je HTML voortbouwt.

• Vervang .col-*-klassen door .g-col-*-klassen. Dat komt doordat onze CSS Grid-kolommen de eigenschap grid-column gebruiken in plaats van width.

• Kolommen en gutterformaten worden ingesteld via CSS-variabelen. Stel deze in op de bovenliggende .grid en pas ze naar wens aan, inline of in een stylesheet, met --bs-columns en --bs-gap.

In de toekomst zal Bootstrap waarschijnlijk overstappen op een hybride oplossing, nu de gap-eigenschap voor flexbox vrijwel volledige browserondersteuning heeft.

Belangrijkste verschillen

Vergeleken met het standaard grid-systeem:

• Flex-utilities beïnvloeden de CSS Grid-kolommen niet op dezelfde manier.

• Gaps vervangen gutters. De gap-eigenschap vervangt de horizontale padding uit ons standaard grid-systeem en werkt meer als margin.

• Daardoor hebben .grids, anders dan .rows, geen negatieve marges en kunnen margin-utilities niet worden gebruikt om de grid-gutters te wijzigen. Grid-gaps worden standaard horizontaal én verticaal toegepast. Zie de sectie over aanpassen voor meer details.

• Inline en eigen stijlen moeten worden gezien als vervanging van modifier-klassen (bijv. style="--bs-columns: 3;" in plaats van class="row-cols-3").

• Nesten werkt op vergelijkbare wijze, maar het kan nodig zijn je kolomaantallen bij elke geneste .grid te resetten. Zie de sectie over nesten voor details.

Voorbeelden

Drie kolommen

Drie even brede kolommen op alle viewports en apparaten maak je met de .g-col-4-klassen. Voeg responsieve klassen toe om de layout per viewportformaat te wijzigen.

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

Responsief

Gebruik responsieve klassen om je layout per viewport aan te passen. Hier beginnen we met twee kolommen op de smalste viewports, en groeien we naar drie kolommen op medium viewports en breder.

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

Vergelijk dat met deze layout met twee kolommen op alle viewports.

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

Omslaan

Grid-items slaan automatisch om naar de volgende regel zodra er horizontaal geen ruimte meer is. Let op: de gap geldt voor zowel horizontale als verticale tussenruimtes tussen grid-items.

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

Starts

Start-klassen zijn bedoeld om de offset-klassen van ons standaard grid te vervangen, maar ze zijn niet helemaal hetzelfde. CSS Grid maakt een grid-template via stijlen die de browser vertellen "begin bij deze kolom" en "eindig bij deze kolom". Die eigenschappen zijn grid-column-start en grid-column-end. Start-klassen zijn een verkorte schrijfwijze voor de eerste. Combineer ze met de kolomklassen om je kolommen naar wens af te meten en uit te lijnen. Start-klassen beginnen bij 1, omdat 0 een ongeldige waarde is voor deze eigenschappen.

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

Automatische kolommen

Wanneer er geen klassen op de grid-items staan (de directe kinderen van een .grid), krijgt elk grid-item automatisch de breedte van één kolom.

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

Dit gedrag kan worden gecombineerd met grid-kolomklassen.

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

Nesten

Net als bij ons standaard grid-systeem maakt ons CSS Grid het eenvoudig om .grids te nesten. Anders dan bij het standaard grid erft dit grid echter wijzigingen in de rijen, kolommen en gaps. Bekijk het onderstaande voorbeeld:

• We overschrijven het standaardaantal kolommen met een lokale CSS-variabele: --bs-columns: 3.
• In de eerste auto-kolom wordt het kolomaantal geërfd en is elke kolom een derde van de beschikbare breedte.
• In de tweede auto-kolom hebben we het kolomaantal op de geneste .grid teruggezet op 12 (onze standaard).
• De derde auto-kolom heeft geen geneste content.

In de praktijk maakt dit complexere en meer op maat gemaakte layouts mogelijk dan ons standaard grid-systeem.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    Eerste auto-kolom
    <div class="grid">
      <div>Auto-kolom</div>
      <div>Auto-kolom</div>
    </div>
  </div>
  <div>
    Tweede auto-kolom
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 van 12</div>
      <div class="g-col-4">4 van 12</div>
      <div class="g-col-2">2 van 12</div>
    </div>
  </div>
  <div>Derde auto-kolom</div>
</div>

Aanpassen

Pas het aantal kolommen, het aantal rijen en de breedte van de gaps aan met lokale CSS-variabelen.

Deze CSS-variabelen hebben geen standaardwaarde; in plaats daarvan passen ze fallback-waarden toe die worden gebruikt totdat er een lokale instantie is opgegeven. Zo gebruiken we var(--bs-rows, 1) voor onze CSS Grid-rijen, wat --bs-rows negeert omdat die nog nergens is ingesteld. Zodra dat wel het geval is, gebruikt de .grid-instantie die waarde in plaats van de fallback-waarde 1.

Zonder grid-klassen

Direct onderliggende elementen van .grid zijn grid-items, dus die krijgen hun afmetingen ook zonder dat je expliciet een .g-col-klasse toevoegt.

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

Kolommen en gaps

Pas het aantal kolommen en de gap aan.

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

Rijen toevoegen

Meer rijen toevoegen en de plaatsing van kolommen wijzigen:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-kolom</div>
  <div class="g-start-2" style="grid-row: 2">Auto-kolom</div>
  <div class="g-start-3" style="grid-row: 3">Auto-kolom</div>
</div>

Gaps

Wijzig alleen de verticale tussenruimtes door row-gap aan te passen. Let op: we gebruiken gap op .grids, maar row-gap en column-gap kunnen naar behoefte worden aangepast.

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

Daardoor kun je verschillende verticale en horizontale gaps hebben, die één waarde (alle kanten) of een paar waarden (verticaal en horizontaal) kunnen aannemen. Dit kun je toepassen met een inline stijl voor gap, of met onze CSS-variabele --bs-gap.

<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

Een beperking van het CSS Grid is dat onze standaardklassen nog steeds worden gegenereerd door twee Sass-variabelen: $grid-columns en $grid-gutter-width. Dat bepaalt in feite vooraf hoeveel klassen er in onze gecompileerde CSS worden gegenereerd. Je hebt hier twee opties:

• Pas die standaard Sass-variabelen aan en compileer je CSS opnieuw.
• Gebruik inline of eigen stijlen om de meegeleverde klassen aan te vullen.

Zo kun je bijvoorbeeld het kolomaantal verhogen en de gap-grootte wijzigen, en daarna je "kolommen" afmeten met een mix van inline stijlen en vooraf gedefinieerde CSS Grid-kolomklassen (bijv. .g-col-4).

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 kolommen</div>
  <div class="g-col-4">.g-col-4</div>
</div>