CSS Grid

Bootstrap's standert rastersysteem fertsjintwurdiget de kulminaasje fan mear as in desennia fan CSS-yndielingstechniken, beproefd en hifke troch miljoenen minsken. Mar, it is ek makke sûnder in protte fan 'e moderne CSS-funksjes en techniken dy't wy sjogge yn browsers lykas it nije CSS Grid.

Hoe't it wurket

Mei Bootstrap 5 hawwe wy de opsje tafoege om in apart rastersysteem yn te skeakeljen dat is boud op CSS Grid, mar mei in Bootstrap-twist. Jo krije noch klassen dy't jo kinne oanfreegje op in eigenwille om responsive layouts te bouwen, mar mei in oare oanpak ûnder de motorkap.

• CSS Grid is opt-in. Skeakelje it standertrastersysteem út troch $enable-grid-classes: falseit CSS-raster yn te stellen en ynskeakelje troch yn te stellen $enable-cssgrid: true. Dan, kompilearje jo Sass opnij.

• Ferfange eksimplaren fan .rowmei .grid. De .gridklasse set display: griden makket in grid-templatedat jo bouwe op mei jo HTML.

• Ferfange .col-*klassen mei .g-col-*klassen. Dit is om't ús CSS Grid-kolommen it grid-columnpân brûke ynstee fan width.

• Kolommen en guttergrutte wurde ynsteld fia CSS-fariabelen. Stel dizze op 'e âlder .griden oanpasse lykas jo wolle, ynline of yn in stylblêd, mei --bs-columnsen --bs-gap.

Yn 'e takomst sil Bootstrap wierskynlik ferskowe nei in hybride oplossing, om't it gappân hast folsleine browserstipe foar flexbox hat berikt.

Key ferskillen

Yn ferliking mei it standert rastersysteem:

• Flex-nutsbedriuwen hawwe gjin ynfloed op de CSS Grid-kolommen op deselde manier.

• Gaps ferfangt goaten. It gappân ferfangt de horizontale paddingfan ús standert rastersysteem en funksjonearret mear as margin.

• As sadanich, yn tsjinstelling ta .rows, .grids hawwe gjin negative marzjes en marzje nutsbedriuwen kinne net brûkt wurde om te feroarjen it roaster gutters. Gridgapen wurde standert horizontaal en fertikaal tapast. Sjoch de seksje oanpasse foar mear details.

• Inline en oanpaste stilen moatte wurde besjoen as ferfangings foar modifier klassen (bgl. style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting wurket op deselde manier, mar kin jo fereaskje dat jo jo kolomtellingen op elke eksimplaar fan in nested .grid. Sjoch de nesting seksje foar details.

Foarbylden

Trije kolommen

Trije kolommen mei deselde breedte oer alle viewports en apparaten kinne wurde makke troch de .g-col-4klassen te brûken. Foegje responsive klassen ta om de yndieling te feroarjen troch viewportgrutte.

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

Responsive

Brûk responsive klassen om jo yndieling oer viewports oan te passen. Hjir begjinne wy ​​mei twa kolommen op 'e smelste viewports, en groeie dan nei trije kolommen op medium viewports en boppe.

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

Ferlykje dat mei dizze twa kolom yndieling by 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>

Wrapping

Rasteritems wikkelje automatysk nei de folgjende rigel as d'r gjin horizontaal romte mear is. Tink derom dat it gapjildt foar horizontale en fertikale gatten tusken 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>

Begjint

Startklassen binne fan doel de offsetklassen fan ús standertraster te ferfangen, mar se binne net hielendal itselde. CSS Grid makket in raster-sjabloan troch stilen dy't browsers fertelle om "begjinne by dizze kolom" en "ein by dizze kolom." Dy eigenskippen binne grid-column-starten grid-column-end. Startklassen binne shorthand foar de eardere. Koppelje se mei de kolomklassen nei grutte en rjochtsje jo kolommen út lykas jo nedich binne. Startklassen begjinne by 1as 0is in ûnjildige wearde foar dizze eigenskippen.

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

As d'r gjin klassen binne op 'e rasteritems (de direkte bern fan in .grid), sil elk rasteritem automatysk wurde grutte nei ien 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 gedrach kin wurde mingd mei 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>

Nesting

Fergelykber mei ús standert grid systeem, ús CSS Grid soarget foar maklik nêst fan .grids. Lykwols, yn tsjinstelling ta de standert, erft dit raster feroarings yn 'e rigen, kolommen en gatten. Beskôgje it foarbyld hjirûnder:

• Wy oerskriuwe it standert oantal kolommen mei in lokale CSS fariabele: --bs-columns: 3.
• Yn 'e earste auto-kolom wurdt it oantal kolommen erfd en elke kolom is ien tredde fan' e beskikbere breedte.
• Yn 'e twadde auto-kolom hawwe wy de kolomtelling op' e nestele weromset .gridnei 12 (ús standert).
• De tredde auto-kolom hat gjin geneste ynhâld.

Yn 'e praktyk makket dit kompleksere en oanpaste yndielingen mooglik yn ferliking mei ús standert 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>

Oanpasse

Pas it oantal kolommen, it oantal rigen en de breedte fan 'e gatten oan mei lokale CSS-fariabelen.

Dizze CSS fariabelen hawwe gjin standert wearde; ynstee, se tapasse fallback wearden dy't brûkt wurde oant in lokale eksimplaar wurdt levere. Bygelyks, wy brûke var(--bs-rows, 1)foar ús CSS Grid rigen, dy't negearret --bs-rowsomdat dat is noch net ynsteld oeral. As it ienris is, sil de .grideksimplaar dy wearde brûke ynstee fan de fallbackwearde fan 1.

Gjin rasterklassen

Eleminten fan direkte bern .gridbinne rasteritems, sadat se grutte wurde sûnder eksplisyt in .g-colklasse ta te foegjen.

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

Kolommen en gatten

Pas it oantal kolommen en it gat oan.

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

It tafoegjen fan rigen

Mear rigen tafoegje en de pleatsing fan kolommen feroarje:

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

Gaps

Feroarje de fertikale gatten allinich troch de row-gap. Tink derom dat wy brûke gapop .grids, mar row-gapen column-gapkin wizige wurde as nedich.

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

Fanwegen dat kinne jo hawwe ferskillende fertikale en horizontale gaps, dat kin nimme in inkele wearde (alle kanten) of in pear wearden (fertikaal en horizontaal). Dit kin tapast wurde mei in ynline-styl foar gap, of mei ús --bs-gapCSS-fariabele.

<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

Ien beheining fan it CSS Grid is dat ús standertklassen noch wurde generearre troch twa Sass-fariabelen, $grid-columnsen $grid-gutter-width. Dit bepaalt effektyf it oantal klassen generearre yn ús kompilearre CSS. Jo hawwe hjir twa opsjes:

• Feroarje dizze standert Sass-fariabelen en kompilearje jo CSS opnij.
• Brûk ynline of oanpaste stilen om de levere klassen te fergrutsjen.

Bygelyks, kinne jo fergrutsje de kolom tellen en feroarje de gat grutte, en dan grutte jo "kolommen" mei in miks fan inline stilen en foarôf definiearre CSS Grid kolom klassen (bgl. .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>