CSS Grid

Ny rafitra grid default an'ny Bootstrap dia maneho ny fiafaran'ny teknikan'ny fametrahana CSS nandritra ny folo taona mahery, nozahan'ny olona an-tapitrisany sy nosedraina. Saingy, noforonina ihany koa izy io tsy misy endri-javatra sy teknika CSS maoderina hitantsika amin'ny navigateur toa ny CSS Grid vaovao.

Ahoana ny fiasan'izany

Miaraka amin'ny Bootstrap 5, nampianay ny safidy ahafahan'ny rafitra grid mitokana izay naorina amin'ny CSS Grid, fa miaraka amin'ny fihodin'ny Bootstrap. Mbola mahazo kilasy azonao ampiharina amin'ny sitrapo ianao amin'ny fananganana lamina mandray andraikitra, saingy amin'ny fomba hafa eo ambanin'ny saron-tava.

• CSS Grid dia nifidy. Atsaharo ny rafitra grid default amin'ny alàlan'ny fametrahana $enable-grid-classes: falseary avelao ny CSS Grid amin'ny alàlan'ny fametrahana $enable-cssgrid: true. Avy eo, avereno amboary ny Sass anao.

• Soloy ohatra ny .rowamin'ny .grid. Ny .gridkilasy dia mametraka display: gridsy mamorona grid-templateizay aorinao amin'ny HTML anao.

• Soloy .col-*kilasy ny .g-col-*kilasy. Izany dia satria ny tsanganana CSS Grid dia mampiasa ny grid-columnfananana fa tsy width.

• Ny tsanganana sy ny haben'ny tatatra dia apetraka amin'ny alalan'ny CSS variables. Apetraho amin'ny ray aman-dreny ireo .gridary amboary araka izay tianao, an-tsoratra na amin'ny stylesheet, miaraka amin'ny --bs-columnsary --bs-gap.

Amin'ny ho avy, Bootstrap dia mety hifindra amin'ny vahaolana hybrid satria ny gapfananana dia nahazo fanohanana feno amin'ny navigateur ho an'ny flexbox.

Fahasamihafana lehibe

Raha ampitahaina amin'ny rafitra grid default:

• Ny fitaovana Flex dia tsy misy fiantraikany amin'ny tsanganana CSS Grid amin'ny fomba mitovy.

• Ny banga dia manolo ny tatatra. Ny gapfananana dia manolo ny marindrano paddingavy amin'ny rafitra grid default ary miasa toy ny margin.

• Noho izany, tsy mitovy .rowamin'ny s, .gridny s dia tsy manana sisiny ratsy ary tsy azo ampiasaina hanovana ny tatatra vy. Ny hantsana marindrano dia ampiharina mitsivalana sy mitsangana amin'ny alàlan'ny default. Jereo ny fizarana fanamboarana raha mila fanazavana fanampiny.

• Tokony hojerena ho solon'ny kilasy fanovana (oh: style="--bs-columns: 3;"vs. class="row-cols-3")

• Miasa toy izany koa ny fanatobiana, saingy mety mitaky anao hamerenanao ny isan'ny tsanganana amin'ny tranga tsirairay amin'ny tsanganana iray .grid. Jereo ny fizarana fanatobiana ho an'ny antsipiriany.

OHATRA

Andry telo

Tsanganana telo mitovy sakany amin'ny sehatra fijerena sy fitaovana rehetra dia azo noforonina amin'ny fampiasana ireo .g-col-4kilasy. Manampia kilasy mandray andraikitra hanovana ny lamina araka ny haben'ny seranan-tsambo.

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

manaiky

Mampiasà kilasy mandray andraikitra hanitsiana ny firafitry ny toerana misy anao. Eto isika dia manomboka amin'ny tsanganana roa amin'ny seranan-tsambo tery indrindra, ary avy eo dia mitombo ho tsanganana telo amin'ny seranan-tsambo antonony sy ambony.

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

Ampitahao amin'ity fandrafetana tsanganana roa ity amin'ny toerana fijerena rehetra.

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

Fonosana

Ny singa Grid dia mifono ho azy amin'ny andalana manaraka rehefa tsy misy toerana mitsivalana intsony. Mariho fa gapmihatra amin'ny elanelana mitsivalana sy mitsangana eo amin'ireo singa grid.

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

manomboka

Ny kilasy fanombohana dia mikendry ny hanolo ny kilasy offset an'ny grid default, saingy tsy mitovy izy ireo. Ny CSS Grid dia mamorona môdely grid amin'ny alàlan'ny fomba izay milaza amin'ny navigateur hoe "manomboka amin'ity tsanganana ity" sy "mifarana amin'ity tsanganana ity." Ireo fananana ireo dia grid-column-startary grid-column-end. Ny kilasy fanombohana dia fanafohezana ny teo aloha. Ampifandraiso amin'ny kilasin'ny tsanganana izy ireo araka ny habeny ary ampifanaraho ny tsangananao araka izay ilainao. Manomboka amin'ny sanda tsy mety amin'ireo fananana ireo ny kilasy 1fanombohana 0.

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

Andry fiara

Rehefa tsy misy kilasy ao amin'ny singa grid (ny ankizy avy hatrany amin'ny a .grid), isaky ny singa grid dia ho tonga ho azy ny haben'ny tsanganana iray.

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

Ity fihetsika ity dia azo ampifandraisina amin'ny kilasy tsanganana grid.

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

akany

Mitovy amin'ny rafi-pandaminana mahazatra, ny CSS Grid dia mamela ny fanaingoana mora .grids. Na izany aza, tsy toy ny default, ity grid ity dia mandova fiovana eo amin'ny andalana, tsanganana ary banga. Diniho ny ohatra eto ambany:

• Ampidinoinay ny isan'ny tsanganana misy ny fari-piadidiana CSS eo an-toerana: --bs-columns: 3.
• Ao amin'ny tsanganana mandeha ho azy voalohany, nolovaina ny isan'ny tsanganana ary ny ampahatelon'ny sakany misy ny tsanganana tsirairay.
• Ao amin'ny tsanganana mandeha ho azy faharoa, naverinay .gridho 12 ny isan'ny tsanganana eo amin'ny akany (ny default).
• Ny tsanganana fahatelo fahatelo dia tsy misy atiny misy akany.

Amin'ny fampiharana izany dia mamela endrika sarotra kokoa sy mahazatra kokoa raha ampitahaina amin'ny rafitra grid default.

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

Customizing

Amboary ny isan'ny tsanganana, ny isan'ny andalana ary ny sakan'ny banga miaraka amin'ny fari-piadidiana CSS eo an-toerana.

Ireo varimbazaha CSS ireo dia tsy manana sanda default; fa kosa, mampihatra soatoavina mihemotra izay ampiasaina mandra -panomezana ohatra eo an-toerana. Ohatra, ampiasainay var(--bs-rows, 1)ho an'ny andalana CSS Grid izahay, izay tsy miraharaha --bs-rowssatria mbola tsy napetraka na aiza na aiza. Rehefa izany dia .gridhampiasa an'io sanda io ny ohatra fa tsy ny sanda miverina amin'ny 1.

Tsy misy kilasy grid

Ny singan'ny ankizy eo no ho eo .griddia singa marindrano, noho izany dia haverina ny habeny nefa tsy ampiana .g-colkilasy mazava.

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

Tsanganana sy banga

Ahitsio ny isan'ny tsanganana sy ny elanelana.

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

Manampy andalana

Manampy andalana bebe kokoa sy manova ny fametrahana tsanganana:

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

banga

Hanova ny banga mitsangana amin'ny alàlan'ny fanovana ny row-gap. Mariho fa ampiasainay gapamin'ny .grids, fa row-gapary column-gapazo ovaina araka izay ilaina.

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

Noho izany dia afaka manana s mitsangana sy mitsivalana samihafa ianao gap, izay afaka maka sanda tokana (ny lafiny rehetra) na sanda roa (mitsangana sy mitsivalana). Ity dia azo ampiharina amin'ny fomba inline ho an'ny gap, na amin'ny --bs-gapfari-piadidiana CSS.

<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

Ny fetra iray amin'ny CSS Grid dia ny hoe ny kilasy mahazatra antsika dia mbola ateraky ny fari-piadidiana Sass roa, $grid-columnsary $grid-gutter-width. Izany dia mamaritra mialoha ny isan'ny kilasy voaforona ao amin'ny CSS natambatray. Manana safidy roa ianao eto:

• Ovao ireo fari-piadidiana Sass ireo ary amboary indray ny CSS-nao.
• Mampiasà fomba an-tsipika na mahazatra mba hampitomboana ireo kilasy nomena.

Ohatra, azonao atao ny mampitombo ny isan'ny tsanganana ary manova ny haben'ny elanelana, ary avy eo mametaka ny "tsangantsangananao" miaraka amin'ny fifangaroan'ny fomba inline sy ny kilasy CSS Grid efa voafaritra mialoha (oh, .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>