CSS-Krado

La defaŭlta kradsistemo de Bootstrap reprezentas la kulminon de pli ol jardeko da CSS-aranĝteknikoj, provitaj kaj provitaj de milionoj da homoj. Sed, ĝi ankaŭ estis kreita sen multaj el la modernaj CSS-ecoj kaj teknikoj, kiujn ni vidas en retumiloj kiel la nova CSS-Krado.

Kiel ĝi funkcias

Kun Bootstrap 5, ni aldonis la eblon ebligi apartan kradsistemon, kiu estas konstruita sur CSS Grid, sed kun Bootstrap-tordado. Vi ankoraŭ ricevas klasojn, kiujn vi povas apliki laŭkaprice por konstrui respondemajn aranĝojn, sed kun malsama aliro sub la kapuĉo.

• CSS-Krado estas elektebla. Malebligu la defaŭltan kradsistemon per agordo $enable-grid-classes: falsekaj ebligu la CSS-Kradon per agordo $enable-cssgrid: true. Poste, rekompilu vian Sass.

• Anstataŭigi okazojn de .rowper .grid. La .gridklaso starigas display: gridkaj kreas per grid-templatekiu vi konstruas per via HTML.

• Anstataŭigi .col-*klasojn per .g-col-*klasoj. Ĉi tio estas ĉar niaj CSS-Krado-kolumnoj uzas la grid-columnposedaĵon anstataŭe de width.

• Kolumnoj kaj defluilgrandoj estas fiksitaj per CSS-variabloj. Agordu ĉi tiujn sur la gepatro .gridkaj agordu kiel vi volas, enlinie aŭ en stilfolio, per --bs-columnskaj --bs-gap.

En la estonteco, Bootstrap verŝajne ŝanĝos al hibrida solvo ĉar la gapposedaĵo atingis preskaŭ plenan retumilon subtenon por flexbox.

Ŝlosilaj diferencoj

Kompare kun la defaŭlta kradsistemo:

• Fleksaj utilecoj ne influas la kolumnojn de CSS Grid en la sama maniero.

• Interspacoj anstataŭigas kanaletojn. La gapposedaĵo anstataŭigas la horizontalon paddingde nia defaŭlta kradsistemo kaj funkcias pli kiel margin.

• Kiel tia, male al .rows, .grids havas neniujn negativajn marĝenojn kaj marĝenservaĵoj ne povas esti uzitaj por ŝanĝi la kradkanaletojn. Kradinterspacoj estas aplikataj horizontale kaj vertikale defaŭlte. Vidu la agordan sekcion por pliaj detaloj.

• Enliniaj kaj kutimaj stiloj devus esti rigardataj kiel anstataŭaĵoj por modifklasoj (ekz., style="--bs-columns: 3;"vs class="row-cols-3").

• Nestado funkcias simile, sed eble postulas, ke vi rekomencu viajn kolumnkalkulojn sur ĉiu okazo de nestita .grid. Vidu la nestan sekcion por detaloj.

Ekzemploj

Tri kolumnoj

Tri samlarĝaj kolumnoj tra ĉiuj vidfenestroj kaj aparatoj povas esti kreitaj uzante la .g-col-4klasojn. Aldonu respondemajn klasojn por ŝanĝi la aranĝon laŭ grando de vidujo.

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

Respondema

Uzu respondemajn klasojn por ĝustigi vian aranĝon trans vidfenestroj. Ĉi tie ni komenciĝas per du kolumnoj sur la plej mallarĝaj vidpunktoj, kaj poste kreskas al tri kolumnoj sur mezaj vidportoj kaj supre.

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

Komparu tion kun ĉi tiu dukolumna aranĝo ĉe ĉiuj vidfenestroj.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Envolvado

Kradaj eroj aŭtomate envolviĝas al la sekva linio kiam ne plu estas loko horizontale. Notu, ke la gapvalidas por horizontalaj kaj vertikalaj interspacoj inter kradaj eroj.

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

Komencas

Komencaj klasoj celas anstataŭigi la ofsetajn klasojn de nia defaŭlta krado, sed ili ne estas tute samaj. CSS-Krado kreas kradŝablonon per stiloj, kiuj diras al retumiloj "komenci ĉe ĉi tiu kolumno" kaj "finiĝi ĉe ĉi tiu kolumno". Tiuj ecoj estas grid-column-startkaj grid-column-end. Komencaj klasoj estas stenografio por la unuaj. Parigu ilin kun la kolumnaj klasoj por grandeco kaj vicigi viajn kolumnojn kiel vi bezonas. Komencklasoj komenciĝas je 1kiel 0estas nevalida valoro por ĉi tiuj trajtoj.

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

Aŭtomataj kolumnoj

Kiam ne estas klasoj sur la kradaj eroj (la tujaj filoj de .grid), ĉiu kradaĵo aŭtomate estos grandigita al unu kolumno.

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

Ĉi tiu konduto povas esti miksita kun kradaj kolumnaj klasoj.

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

Nestumado

Simile al nia defaŭlta kradsistemo, nia CSS-Krado ebligas facilan nestadon de .grids. Tamen, male al la defaŭlta, ĉi tiu krado heredas ŝanĝojn en la vicoj, kolumnoj kaj interspacoj. Konsideru la ekzemplon sube:

• Ni anstataŭas la defaŭltan nombron da kolumnoj per loka CSS-variablo: --bs-columns: 3.
• En la unua aŭtomata kolumno, la kolumnombrado estas heredita kaj ĉiu kolumno estas triono de la disponebla larĝo.
• En la dua aŭtomata kolumno, ni restarigis la kolumnkalkulon de la nestita .gridal 12 (nia defaŭlta).
• La tria aŭtomata kolumno havas neniun nestan enhavon.

En praktiko tio permesas pli kompleksajn kaj kutimajn aranĝojn kompare kun nia defaŭlta kradsistemo.

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

Agordado

Agordu la nombron da kolumnoj, la nombron da vicoj kaj la larĝon de la interspacoj kun lokaj CSS-variabloj.

Ĉi tiuj CSS-variabloj havas neniun defaŭltan valoron; anstataŭe, ili aplikas rezervajn valorojn, kiuj estas uzataj ĝis loka okazo estas provizita. Ekzemple, ni uzas var(--bs-rows, 1)por niaj CSS-Krado vicoj, kiuj ignoras --bs-rowsĉar tio ankoraŭ ne estis agordita ie ajn. Post kiam ĝi estas, la .gridpetskribo uzos tiun valoron anstataŭ la rezerva valoro de 1.

Neniuj kradaj klasoj

Tujaj infanoj elementoj de .gridestas kradaj eroj, do ili estos grandigitaj sen eksplicite aldoni .g-colklason.

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

Kolumnoj kaj interspacoj

Alĝustigu la nombron da kolumnoj kaj la interspacon.

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

Aldonante vicojn

Aldonante pliajn vicojn kaj ŝanĝante la lokigon de kolumnoj:

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

Interspacoj

Ŝanĝu la vertikalajn interspacojn nur modifante la row-gap. Notu, ke ni uzas gapsur .grids, sed row-gapkaj column-gappovas esti modifita laŭbezone.

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

Pro tio, vi povas havi malsamajn vertikalajn kaj horizontalajn gaps, kiuj povas preni ununuran valoron (ĉiuj flankoj) aŭ paron da valoroj (vertikala kaj horizontala). Ĉi tio povas esti aplikata per enlinia stilo por gap, aŭ kun nia --bs-gapCSS-variablo.

<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

Unu limigo de la CSS-Krado estas, ke niaj defaŭltaj klasoj ankoraŭ estas generitaj de du Sass-variabloj, $grid-columnskaj $grid-gutter-width. Ĉi tio efike antaŭdeterminas la nombron da klasoj generitaj en nia kompilita CSS. Vi havas du eblojn ĉi tie:

• Modifi tiujn defaŭltajn Sass-variablojn kaj rekompilu vian CSS.
• Uzu enliniajn aŭ kutimajn stilojn por pliigi la provizitajn klasojn.

Ekzemple, vi povas pliigi la kolumnkalkulon kaj ŝanĝi la breĉon grandecon, kaj tiam grandeco viajn "kolumnojn" kun miksaĵo de enliniaj stiloj kaj antaŭdifinita CSS Grid kolumno klasoj (ekz, .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>