CSS-raster
Leer hoe u ons alternatieve lay-outsysteem, gebouwd op CSS Grid, kunt inschakelen, gebruiken en aanpassen met voorbeelden en codefragmenten.
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: false
en schakel het CSS-raster in door in te stellen$enable-cssgrid: true
. Compileer vervolgens uw Sass opnieuw. -
Vervang instanties van
.row
door.grid
. De.grid
klasse steltdisplay: grid
en maakt eengrid-template
aan waarop u voortbouwt met uw HTML. -
Vervang
.col-*
klassen door.g-col-*
klassen. Dit komt omdat onze CSS-rasterkolommen degrid-column
eigenschap gebruiken in plaats vanwidth
. -
Kolommen en gootafmetingen worden ingesteld via CSS-variabelen. Stel deze in op de parent
.grid
en pas deze naar wens aan, inline of in een stylesheet, met--bs-columns
en--bs-gap
.
In de toekomst zal Bootstrap waarschijnlijk overschakelen naar een hybride oplossing, aangezien de gap
accommodatie 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
gap
eigenschap vervangt de horizontalepadding
van ons standaard rastersysteem en functioneert meer alsmargin
. -
Als zodanig hebben s, in tegenstelling tot
.row
s,.grid
geen 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;"
vsclass="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-4
Met 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">
<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">
<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">
<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 gap
toepassing is op horizontale en verticale openingen tussen rasteritems.
<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>
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-start
en 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 1
as 0
is een ongeldige waarde voor deze eigenschappen.
<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>
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">
<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">
<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 .grid
s. 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
.grid
op 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" 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.
Variabele | Terugvalwaarde | Beschrijving |
---|---|---|
--bs-rows |
1 |
Het aantal rijen in uw rastersjabloon |
--bs-columns |
12 |
Het aantal kolommen in uw rastersjabloon |
--bs-gap |
1.5rem |
De grootte van de opening tussen kolommen (verticaal en horizontaal) |
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-rows
omdat dat nog nergens is ingesteld. Zodra dit het geval is, gebruikt de .grid
instantie die waarde in plaats van de fallback-waarde van 1
.
Geen rasterklassen
Onmiddellijke onderliggende elementen van .grid
zijn rasteritems, dus ze krijgen de grootte zonder expliciet een .g-col
klasse toe te voegen.
<div class="grid" 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" 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>
Rijen toevoegen
Meer rijen toevoegen en de plaatsing van kolommen wijzigen:
<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>
hiaten
Wijzig de verticale tussenruimten alleen door derow-gap
. Merk op dat we gap
op .grid
s gebruiken, maar row-gap
en column-gap
kunnen indien nodig worden gewijzigd.
<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>
Daarom kunt u verschillende verticale en horizontale gap
s 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-gap
CSS-variabele.
<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
Een beperking van het CSS-raster is dat onze standaardklassen nog steeds worden gegenereerd door twee Sass-variabelen $grid-columns
en $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" 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>