CSS Grid
Léiert wéi Dir eisen alternativen Layoutsystem aktivéiert, benotzt a personaliséiert op CSS Grid mat Beispiller a Code Snippets.
Bootstrap's Standard Gitter System representéiert de Kulminatioun vun iwwer e Jorzéngt vun CSS Layout Techniken, probéiert a getest vu Millioune Leit. Awer et gouf och erstallt ouni vill vun de modernen CSS Featuren an Techniken déi mir a Browser gesinn wéi dat neit CSS Grid.
Wéi et funktionnéiert
Mat Bootstrap 5 hu mir d'Optioun bäigefüügt fir e separaten Gittersystem z'aktivéieren deen op CSS Grid gebaut ass, awer mat engem Bootstrap Twist. Dir kritt ëmmer nach Klassen, déi Dir op engem Schlag benotze kënnt fir reaktiounsfäeger Layouten ze bauen, awer mat enger anerer Approche ënner der Hood.
-
CSS Grid ass opt-in. Desaktivéiere vum Standard Gittersystem andeems Dir
$enable-grid-classes: false
d'CSS Grid opstellt an aktivéiert andeems Dir$enable-cssgrid: true
. Dann, recompiléiert Är Sass. -
Ersetzen Fäll vu
.row
mat.grid
. D'.grid
Klass setztdisplay: grid
a kreéiert en opgrid-template
deem Dir mat Ärem HTML baut. -
Ersetzen
.col-*
Klassen mat.g-col-*
Klassen. Dëst ass well eis CSS Grid Kolonnen d'grid-column
Propriétéit benotzen anstattwidth
. -
Spalten a Guttgréissten ginn iwwer CSS Variablen gesat. Setzt dës op den Elterendeel
.grid
a personaliséiert wéi Dir wëllt, inline oder an engem Stylesheet, mat--bs-columns
an--bs-gap
.
An Zukunft wäert Bootstrap méiglecherweis op eng Hybridléisung wiesselen well d' gap
Propriétéit bal voll Browser Support fir Flexbox erreecht huet.
Schlëssel Differenzen
Am Verglach mam Standard Gitter System:
-
Flex Utilities beaflossen d'CSS Grid Kolonnen net op déiselwecht Manéier.
-
Lücken ersetzen Rennen. D'
gap
Propriétéit ersetzt den horizontalenpadding
aus eisem Standard Gittersystem a funktionnéiert méi wéimargin
. -
Als esou, am Géigesaz zu
.row
s,.grid
hu s keng negativ Margen a Margin Utilities kënnen net benotzt ginn fir de Gitterrennen z'änneren. Gitterlücken ginn als Standard horizontal a vertikal ugewannt. Gesinn der Personnalisatioun Rubrik fir méi Detailer. -
Inline a personaliséiert Stiler sollten als Ersatz fir Modifizéierungsklassen ugesi ginn (zB
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting funktionnéiert ähnlech, awer kann erfuerderen datt Dir Är Kolonnzuelen op all Instanz vun engem nestet
.grid
. Kuckt d' Nist Sektioun fir Detailer.
Beispiller
Dräi Sailen
Dräi gläich-Breet Kolonnen iwwer all viewports an Apparater kann duerch d' .g-col-4
Klassen benotzt ginn erstallt. Füügt reaktiounsfäeger Klassen fir de Layout duerch Viewportgréisst z'änneren.
<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>
Reaktiounsfäeger
Benotzt reaktiounsfäeger Klassen fir Äre Layout iwwer Viewports unzepassen. Hei fänken mer mat zwou Saile op der schmuelste viewports, an dann wuessen op dräi Saile op mëttel- viewports an uewen.
<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>
Vergläicht dat mat dëser zwee Kolonn Layout op all viewports.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Wrapping
Gitter Elementer wéckelen automatesch op déi nächst Zeil wann et kee Raum méi horizontal ass. Bedenkt datt d' gap
Zeil fir horizontal a vertikal Lücken tëscht Gitterartikele gëlt.
<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>
Fänkt un
Start Klassen zielen eis Standard Gitter Offset Klassen ze ersetzen, awer si sinn net ganz déiselwecht. CSS Grid erstellt eng Gitterschabloun duerch Stiler déi de Browser soen "an dëser Kolonn unzefänken" an "Enn op dëser Kolonn." Dës Eegeschafte sinn grid-column-start
an grid-column-end
. Start Klassen sinn shorthand fir déi fréier. Pair se mat de Kolonnklassen op d'Gréisst an alignéiert Är Kolonnen wéi Dir braucht. Start Klassen fänken um 1
wéi 0
ass en ongëlteg Wäert fir dës Eegeschafte.
<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>
Auto Kolonnen
Wann et keng Klassen op de Gitterartikele sinn (déi direkt Kanner vun engem .grid
), gëtt all Gitterartikel automatesch op eng Kolonn ugepasst.
<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>
Dëst Verhalen ka mat Gitterkolonneklassen gemëscht ginn.
<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>
Nesting
Ähnlech wéi eisem Standard Gitter System, eis CSS Grid erlaabt einfach Nesting vun .grid
s. Wéi och ëmmer, am Géigesaz zum Standard, ierft dëst Gitter Ännerungen an de Reihen, Spalten a Lücken. Betruecht d'Beispill hei ënnen:
- Mir iwwerschreiden d'Standardzuel vu Spalten mat enger lokaler CSS Variabel
--bs-columns: 3
:. - An der éischter Auto-Kolonn gëtt d'Kolonnzuel ierflecher an all Kolonn ass en Drëttel vun der verfügbarer Breet.
- An der zweeter Auto-Kolonn hu mir d'Kolonnzuel op den Nested
.grid
op 12 zréckgesat (eis Standard). - Déi drëtt Auto-Kolonn huet keen nesteten Inhalt.
An der Praxis erlaabt dëst méi komplex a personaliséiert Layouten am Verglach mat eisem Standard Gittersystem.
<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>
Personnalisatioun
Personnaliséiert d'Zuel vun de Spalten, d'Zuel vun de Reihen an d'Breet vun de Lücken mat lokalen CSS Variablen.
Variabel | Fallback Wäert | Beschreiwung |
---|---|---|
--bs-rows |
1 |
D'Zuel vun de Reihen an Ärem Gitter Schabloun |
--bs-columns |
12 |
D'Zuel vun de Spalten an Ärem Gitter Schabloun |
--bs-gap |
1.5rem |
D'Gréisst vum Spalt tëscht de Sailen (vertikal an horizontal) |
Dës CSS Verännerlechen hu kee Standardwäert; amplaz, se gëlle Fallback Wäerter déi benotzt ginn bis eng lokal Instanz gëtt. Zum Beispill benotze mir var(--bs-rows, 1)
fir eis CSS Grid Reihen, déi ignoréiert --bs-rows
well dat nach néierens gesat gouf. Wann et ass, .grid
benotzt d'Instanz dee Wäert amplaz vum Réckfallwäert vun 1
.
Keng Gitterklassen
Direkt Kanner Elementer vun .grid
sinn Gitterartikelen, sou datt se ugepasst ginn ouni explizit eng .g-col
Klass dobäizemaachen.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Spalten a Lücken
Ajustéiert d'Zuel vun de Sailen an d'Lück.
<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>
Zeile derbäigesat
Méi Zeilen derbäisetzen an d'Placement vun de Kolonnen änneren:
<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>
Lücken
Ännert déi vertikal Lücken nëmmen andeems Dir de row-gap
. Notéiert datt mir gap
op .grid
s benotzen, awer row-gap
a column-gap
kënne geännert ginn wéi néideg.
<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>
Dofir kënnt Dir verschidde vertikal an horizontal gap
s hunn, déi en eenzege Wäert (all Säiten) oder e puer Wäerter (vertikal an horizontal) huelen. Dëst kann mat engem Inline-Stil fir gap
, oder mat eiser --bs-gap
CSS Variabel applizéiert ginn.
<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
Eng Begrenzung vum CSS Grid ass datt eis Standardklassen nach ëmmer vun zwou Sass Variablen generéiert ginn, $grid-columns
an $grid-gutter-width
. Dëst predeterminéiert effektiv d'Zuel vun de Klassen, déi an eiser kompiléierter CSS generéiert ginn. Dir hutt zwou Méiglechkeeten hei:
- Ännert dës Standard Sass Variablen a kompiléiert Är CSS nei.
- Benotzt inline oder personaliséiert Stiler fir déi geliwwert Klassen ze vergréisseren.
Zum Beispill kënnt Dir d'Kolonnzuel erhéijen an d'Spaltgréisst änneren, an dann Är "Kolonnen" mat enger Mëschung aus Inline Stiler a virdefinéierte CSS Grid Kolonn Klassen (zB .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>