CSS Grid

Tsohuwar tsarin grid na Bootstrap yana wakiltar ƙarshen fiye da shekaru goma na dabarun shimfidar CSS, wanda miliyoyin mutane suka gwada kuma suka gwada. Amma, kuma an ƙirƙira shi ba tare da yawancin fasalolin CSS na zamani da dabaru da muke gani a cikin masu bincike kamar sabon CSS Grid ba.

Yadda yake aiki

Tare da Bootstrap 5, mun ƙara zaɓi don kunna tsarin grid daban wanda aka gina akan Grid na CSS, amma tare da murɗawar Bootstrap. Har yanzu kuna samun azuzuwan da zaku iya amfani da su bisa son rai don gina shimfidu masu amsawa, amma tare da wata hanya ta daban a ƙarƙashin hular.

• CSS Grid ya shiga. Kashe tsoffin tsarin grid ta saiti $enable-grid-classes: falsekuma kunna Grid na CSS ta saitin $enable-cssgrid: true. Sannan, sake tara Sass ɗin ku.

• Sauya misalan .rowda .grid. Ajin .gridyana saita display: gridkuma yana ƙirƙirar abin grid-templateda kuke ginawa akan HTML ɗinku.

• Sauya .col-*azuzuwan da .g-col-*darasi. Wannan saboda ginshiƙan CSS Grid ɗinmu suna amfani da grid-columnkadarorin maimakon width.

• An saita ginshiƙai da girman gutter ta masu canjin CSS. Saita waɗannan akan iyaye .gridkuma keɓance duk yadda kuke so, ta layi ko cikin takardar salo, tare --bs-columnsda --bs-gap.

A nan gaba, Bootstrap zai iya canzawa zuwa mafita ga kayan masarufi kamar yadda gapdukiyar ta sami kusan cikakken tallafin bincike don flexbox.

Mabuɗin bambance-bambance

Idan aka kwatanta da tsohowar tsarin grid:

• Abubuwan amfani masu sassauƙa ba sa shafar ginshiƙan Grid na CSS ta hanya ɗaya.

• Gaps yana maye gurbin gutters. Kayan gapyana maye gurbin kwance paddingdaga tsarin grid ɗin mu na asali kuma yana aiki kamar margin.

• Don haka, ba kamar .rows ba, .grids ba su da tazara mara kyau kuma ba za a iya amfani da abubuwan amfani da gefe don canza grid gutters ba. Ana amfani da gibin grid a kwance da a tsaye ta tsohuwa. Duba sashin keɓancewa don ƙarin cikakkun bayanai.

• Ya kamata a duba salon layi da na al'ada azaman maye gurbin azuzuwan masu gyara (misali, style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting yana aiki makamancin haka, amma yana iya buƙatar ka sake saita kirga ginshiƙi akan kowane misali na gida .grid. Duba sashin gida don cikakkun bayanai.

Misalai

Rukunoni uku

Za a iya ƙirƙira ginshiƙai uku daidai-daidai a duk wuraren kallo da na'urori ta amfani da .g-col-4azuzuwan. Ƙara azuzuwan amsa don canza shimfidar wuri ta girman kallon kallo.

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

Mai amsawa

Yi amfani da azuzuwan amsa don daidaita shimfidar ku a cikin wuraren kallo. Anan zamu fara da ginshiƙai biyu akan mafi ƙanƙantar wuraren kallo, sannan mu girma zuwa ginshiƙai uku akan matsakaitan kallon kallo da sama.

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

Kwatanta wannan da wannan shimfidar shafi biyu a duk wuraren kallo.

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

Rufewa

Abubuwan grid suna nannade ta atomatik zuwa layi na gaba lokacin da babu sauran daki a kwance. Lura cewa gapya shafi rata a kwance da a tsaye tsakanin abubuwan grid.

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

farawa

Fara azuzuwan nufin maye gurbin tsoffin azuzuwan grid ɗin mu, amma ba iri ɗaya bane. CSS Grid yana ƙirƙirar samfuri ta hanyar salon da ke gaya wa masu bincike su "fara daga wannan ginshiƙi" da "ƙare a wannan shafi." Waɗannan kaddarorin sune grid-column-startkuma grid-column-end. Fara azuzuwan shorthand ne ga tsohon. Haɗa su tare da azuzuwan ginshiƙan zuwa girman kuma daidaita ginshiƙan duk yadda kuke buƙata. Fara azuzuwan suna farawa 1kamar yadda 0ƙima mara inganci ga waɗannan kaddarorin.

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

ginshiƙai ta atomatik

Lokacin da babu azuzuwan akan abubuwan grid ('ya'yan nan kusa na a .grid), kowane abun grid zai girma ta atomatik zuwa shafi ɗaya.

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

Ana iya haɗa wannan hali tare da azuzuwan ginshiƙan grid.

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

Gurasa

Kama da tsohowar tsarin grid ɗin mu, Grid ɗin mu na CSS yana ba da damar sauƙi na .grids. Koyaya, ba kamar tsoho ba, wannan grid yana gaji canje-canje a cikin layuka, ginshiƙai, da gibba. Yi la'akari da misalin da ke ƙasa:

• Mun soke tsohuwar adadin ginshiƙai tare da madaidaicin CSS na gida: --bs-columns: 3.
• A cikin ginshiƙi na farko, ana gadon ƙidayar ginshiƙi kuma kowane ginshiƙi shine kashi ɗaya bisa uku na faɗin da ke akwai.
• A cikin ginshiƙi na atomatik na biyu, mun sake saita ƙidayar ginshiƙi akan gida .gridzuwa 12 (tsoho namu).
• Rumbun atomatik na uku ba shi da abun ciki mara tushe.

A aikace wannan yana ba da damar ƙarin sarƙaƙƙiya da shimfidu na al'ada idan aka kwatanta da tsoffin tsarin grid ɗin mu.

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

Keɓancewa

Keɓance adadin ginshiƙai, adadin layuka, da faɗin giɓi tare da masu canjin CSS na gida.

Waɗannan masu canjin CSS ba su da ƙima ta asali; maimakon haka, suna amfani da ƙimar koma baya waɗanda ake amfani da su har sai an samar da misali na gida. Misali, muna amfani var(--bs-rows, 1)da layukanmu na CSS Grid, wanda yayi watsi --bs-rowsda shi saboda ba a saita hakan ba tukuna. Da zarar ya kasance, .gridmisalin zai yi amfani da wannan ƙimar maimakon ƙimar koma baya na 1.

Babu azuzuwan grid

Abubuwan da ke cikin yara na kai tsaye abubuwa .gridne na grid, don haka za a yi girman su ba tare da ƙara .g-colaji a sarari ba.

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

ginshiƙai da gibba

Daidaita adadin ginshiƙai da rata.

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

Ƙara layuka

Ƙara ƙarin layuka da canza jeri na ginshiƙai:

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

Gas

Canja gibin tsaye kawai ta hanyar gyara row-gap. Lura cewa muna amfani gapda .grids, amma row-gapkuma column-gapza'a iya gyara su kamar yadda ake buƙata.

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

Saboda haka, za ku iya samun daban-daban na tsaye da gaps, wanda zai iya ɗaukar ƙima ɗaya (duk bangarorin) ko nau'i biyu na dabi'u (a tsaye da a kwance). Ana iya amfani da wannan tare da salon layi don gap, ko tare da --bs-gapcanjin mu na CSS.

<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

Iyaka ɗaya na Grid na CSS shine har yanzu ana samar da tsoffin azuzuwan mu ta masu canjin Sass guda biyu, $grid-columnsda $grid-gutter-width. Wannan yana ƙayyadadden ƙayyadaddun adadin azuzuwan da aka samar a cikin CSS ɗin mu da aka haɗa. Kuna da zaɓuɓɓuka biyu a nan:

• Gyara waɗancan tsoffin masu canji na Sass kuma a sake tattara CSS ɗin ku.
• Yi amfani da salon layi ko na al'ada don haɓaka azuzuwan da aka bayar.

Misali, zaku iya ƙara ƙididdige ginshiƙi kuma canza girman rata, sannan girman “ginshiƙanku” tare da cakuda salon layi da ƙayyadaddun azuzuwan ginshiƙi na CSS Grid (misali, .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>