CSS-raster

Het standaardrastersysteem van Bootstrap vertegenwoordigt het hoogtepunt van meer dan een decennium aan CSS-lay-outtechnieken, beproefd en getest door miljoenen mensen. Maar het is ook gemaakt zonder veel van de moderne CSS-functies en -technieken die we zien in browsers zoals het nieuwe CSS-raster.

Hoe het werkt

Met Bootstrap 5 hebben we de optie toegevoegd om een ​​apart rastersysteem in te schakelen dat is gebouwd op CSS Grid, maar met een Bootstrap-twist. Je krijgt nog steeds lessen die je in een opwelling kunt toepassen om responsieve lay-outs te bouwen, maar met een andere aanpak onder de motorkap.

• CSS Grid is opt-in. Schakel het standaardrastersysteem uit door in te stellen $enable-grid-classes: falseen schakel het CSS-raster in door in te stellen $enable-cssgrid: true. Compileer vervolgens uw Sass opnieuw.

• Vervang instanties van .rowdoor .grid. De .gridklasse stelt display: griden maakt een grid-templateaan waarop u voortbouwt met uw HTML.

• Vervang .col-*klassen door .g-col-*klassen. Dit komt omdat onze CSS-rasterkolommen de grid-columneigenschap gebruiken in plaats van width.

• Kolommen en gootafmetingen worden ingesteld via CSS-variabelen. Stel deze in op de parent .griden pas deze naar wens aan, inline of in een stylesheet, met --bs-columnsen --bs-gap.

In de toekomst zal Bootstrap waarschijnlijk overschakelen naar een hybride oplossing, aangezien het gappand bijna volledige browserondersteuning voor flexbox heeft bereikt.

Belangrijkste verschillen

Vergeleken met het standaard rastersysteem:

• Flex-hulpprogramma's hebben niet op dezelfde manier invloed op de CSS-rasterkolommen.

• Gaten vervangt dakgoten. De gapeigenschap vervangt de horizontale paddingvan ons standaard rastersysteem en functioneert meer als margin.

• Als zodanig hebben s, in tegenstelling tot .rows, .gridgeen negatieve marges en kunnen margehulpprogramma's niet worden gebruikt om de roostergoten te wijzigen. Rasteropeningen worden standaard horizontaal en verticaal toegepast. Zie de sectie aanpassen voor meer details.

• Inline en aangepaste stijlen moeten worden gezien als vervangingen voor modificatieklassen (bijv. style="--bs-columns: 3;"vs class="row-cols-3").

• Nesten werkt op dezelfde manier, maar het kan zijn dat u uw kolomtellingen opnieuw moet instellen voor elke instantie van een genest .grid. Zie de sectie nesten voor details.

Voorbeelden

Drie kolommen

.g-col-4Met behulp van de klassen kunnen drie kolommen van gelijke breedte voor alle viewports en apparaten worden gemaakt . Voeg responsieve klassen toe om de lay-out te wijzigen op viewport-grootte.

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

Snel reagerend

Gebruik responsieve klassen om uw lay-out in verschillende viewports aan te passen. Hier beginnen we met twee kolommen op de smalste viewports, en groeien dan naar drie kolommen op medium viewports en hoger.

<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 eens met deze lay-out met twee kolommen bij 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>

inpakken

Rasteritems lopen automatisch door naar de volgende regel wanneer er horizontaal geen ruimte meer is. Merk op dat dit van gaptoepassing is op horizontale en verticale openingen tussen rasteritems.

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

begint

Startklassen zijn bedoeld om de offsetklassen van ons standaardraster te vervangen, maar ze zijn niet helemaal hetzelfde. CSS Grid maakt een rastersjabloon door middel van stijlen die browsers vertellen "begin bij deze kolom" en "eindig bij deze kolom". Die eigenschappen zijn grid-column-starten grid-column-end. Startklassen zijn een afkorting voor de eerste. Koppel ze met de kolomklassen op maat en lijn uw kolommen uit zoals u dat wilt. Startklassen beginnen bij 1as 0is een ongeldige waarde 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

Als er geen klassen zijn in de rasteritems (de directe kinderen van een .grid), wordt elk rasteritem automatisch verkleind tot éé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 gemengd met rasterkolomklassen.

<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 rastersysteem, maakt ons CSS-raster het eenvoudig nesten van .grids. In tegenstelling tot de standaard neemt dit raster echter wijzigingen in de rijen, kolommen en gaten over. Beschouw het onderstaande voorbeeld:

• We overschrijven het standaard aantal kolommen met een lokale CSS-variabele: --bs-columns: 3.
• In de eerste automatische kolom wordt het aantal kolommen overgenomen en is elke kolom een ​​derde van de beschikbare breedte.
• In de tweede automatische kolom hebben we het aantal kolommen op de geneste opnieuw ingesteld .gridop 12 (onze standaard).
• De derde automatische kolom heeft geen geneste inhoud.

In de praktijk zorgt dit voor meer complexe en aangepaste lay-outs in vergelijking met ons standaard rastersysteem.

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

Aanpassen

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

Deze CSS-variabelen hebben geen standaardwaarde; in plaats daarvan passen ze fallback-waarden toe die worden gebruikt totdat een lokale instantie wordt geleverd. We gebruiken bijvoorbeeld var(--bs-rows, 1)voor onze CSS Grid rijen, die negeert --bs-rowsomdat dat nog nergens is ingesteld. Zodra dit het geval is, gebruikt de .gridinstantie die waarde in plaats van de fallback-waarde van 1.

Geen rasterklassen

Onmiddellijke onderliggende elementen van .gridzijn rasteritems, dus ze krijgen de grootte zonder expliciet een .g-colklasse toe te voegen.

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

Kolommen en gaten

Pas het aantal kolommen en de tussenruimte 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-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>

hiaten

Wijzig de verticale tussenruimten alleen door de row-gap. Merk op dat we gapop .grids gebruiken, maar row-gapen column-gapkunnen indien nodig worden gewijzigd.

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

Daarom kunt u verschillende verticale en horizontale gaps hebben, die een enkele waarde (alle zijden) of een paar waarden (verticaal en horizontaal) kunnen aannemen. Dit kan worden toegepast met een inline-stijl voor gap, of met onze --bs-gapCSS-variabele.

<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-raster is dat onze standaardklassen nog steeds worden gegenereerd door twee Sass-variabelen $grid-columnsen $grid-gutter-width. Dit bepaalt effectief het aantal klassen dat wordt gegenereerd in onze gecompileerde CSS. Je hebt hier twee opties:

• Wijzig die standaard Sass-variabelen en compileer uw CSS opnieuw.
• Gebruik inline of aangepaste stijlen om de aangeboden klassen uit te breiden.

U kunt bijvoorbeeld het aantal kolommen verhogen en de grootte van de tussenruimte wijzigen, en vervolgens uw "kolommen" op maat maken met een mix van inline-stijlen en vooraf gedefinieerde CSS-rasterkolomklassen (bijv. .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>