CSS Grid

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: falsed'CSS Grid opstellt an aktivéiert andeems Dir $enable-cssgrid: true. Dann, recompiléiert Är Sass.

• Ersetzen Fäll vu .rowmat .grid. D' .gridKlass setzt display: grida kreéiert en op grid-templatedeem Dir mat Ärem HTML baut.

• Ersetzen .col-*Klassen mat .g-col-*Klassen. Dëst ass well eis CSS Grid Kolonnen d' grid-columnPropriétéit benotzen anstatt width.

• Spalten a Guttgréissten ginn iwwer CSS Variablen gesat. Setzt dës op den Elterendeel .grida personaliséiert wéi Dir wëllt, inline oder an engem Stylesheet, mat --bs-columnsan --bs-gap.

An Zukunft wäert Bootstrap méiglecherweis op eng Hybridléisung wiesselen well d' gapProprié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' gapPropriétéit ersetzt den horizontalen paddingaus eisem Standard Gittersystem a funktionnéiert méi wéi margin.

• Als esou, am Géigesaz zu .rows, .gridhu 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;"vs class="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-4Klassen benotzt ginn erstallt. Füügt reaktiounsfäeger Klassen fir de Layout duerch Viewportgréisst z'änneren.

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

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

Vergläicht dat mat dëser zwee Kolonn Layout op all 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>

Wrapping

Gitter Elementer wéckelen automatesch op déi nächst Zeil wann et kee Raum méi horizontal ass. Bedenkt datt d' gapZeil fir horizontal a vertikal Lücken tëscht Gitterartikele gëlt.

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

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-startan 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 1wéi 0ass en ongëlteg Wäert fir dës Eegeschafte.

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

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

Dëst Verhalen ka mat Gitterkolonneklassen gemëscht ginn.

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

Nesting

Ähnlech wéi eisem Standard Gitter System, eis CSS Grid erlaabt einfach Nesting vun .grids. 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 .gridop 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 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>

Personnalisatioun

Personnaliséiert d'Zuel vun de Spalten, d'Zuel vun de Reihen an d'Breet vun de Lücken mat lokalen CSS Variablen.

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-rowswell dat nach néierens gesat gouf. Wann et ass, .gridbenotzt d'Instanz dee Wäert amplaz vum Réckfallwäert vun 1.

Keng Gitterklassen

Direkt Kanner Elementer vun .gridsinn Gitterartikelen, sou datt se ugepasst ginn ouni explizit eng .g-colKlass dobäizemaachen.

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

Zeile derbäigesat

Méi Zeilen derbäisetzen an d'Placement vun de Kolonnen änneren:

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

Lücken

Ännert déi vertikal Lücken nëmmen andeems Dir de row-gap. Notéiert datt mir gapop .grids benotzen, awer row-gapa column-gapkënne geännert ginn wéi néideg.

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

Dofir kënnt Dir verschidde vertikal an horizontal gaps 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-gapCSS Variabel applizéiert ginn.

<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

Eng Begrenzung vum CSS Grid ass datt eis Standardklassen nach ëmmer vun zwou Sass Variablen generéiert ginn, $grid-columnsan $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 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>