CSS Grid

Nidaamka isku xidhka caadiga ah ee Bootstrap waxa uu ka dhigan yahay gunaanadka in ka badan toban sano oo farsamooyinka qaabaynta CSS, oo ay tijaabiyeen oo ay tijaabiyeen malaayiin qof. Laakin, waxa sidoo kale la abuuray iyada oo aan la helin qaar badan oo ka mid ah qaababka casriga ah ee CSS iyo farsamooyinka aan ku aragno daalacashada sida Grid-ka cusub ee CSS.

Sida ay u shaqeyso

Iyada oo la adeegsanayo Bootstrap 5, waxaan ku darnay ikhtiyaarka si aan awood ugu siinno nidaam shabakadeed gooni ah oo lagu dhisay Grid CSS, laakiin leh maroojin Bootstrap ah. Weli waxaad heleysaa xiisado aad ku dalban karto rabitaan si aad u dhisto qaab-dhismeedyo jawaab celin leh, laakiin leh hab ka duwan kan hoostiisa.

• CSS Grid waa door-biday Dami nidaamka grid-ka caadiga ah adiga oo dejinaya $enable-grid-classes: falseoo awood u siinaya CSS Grid adiga oo dejinaya $enable-cssgrid: true. Kadib, dib u soo celi Sass-kaaga.

• .rowKu beddel tusaalooyinka .grid. Fasalka .gridwuxuu dejiyaa display: gridoo abuuraa mid grid-templateaad ku dhisto HTML-kaaga.

• .col-*Fasallada ku beddel .g-col-*fasallo. Tani waa sababta oo ah tiirarkayada CSS Grid waxay isticmaalaan grid-columnhantida halkii ay ka isticmaali lahaayeen width.

• Tiirarka iyo cabbirrada qulqulka waxaa lagu dejiyey doorsoomayaasha CSS. Ku dheji kuwan waalidka .gridoo habbee si kasta oo aad rabto, khad dhexdeed ah ama qaab xaashi, leh --bs-columnsiyo --bs-gap.

Mustaqbalka, Bootstrap waxay u badan tahay inuu u wareego xal isku-dhafan maadaama gaphantidu ay ku guulaysteen taageero buuxda oo birawsarka ah flexbox.

Kala duwanaanshaha muhiimka ah

Marka la barbar dhigo nidaamka grid-ka caadiga ah:

• Utility Flex ma saameeyaan tiirarka CSS Grid si la mid ah.

• Nusqaamaha ayaa beddelaya majaraha. Hantidu gapwaxay beddeshaa jiifka paddingka jira nidaamkayaga shabagga ah wuxuuna u shaqeeyaa si ka sii badan margin.

• Sidan oo kale, si ka duwan .rows, .grids ma laha xad xun oo utility margin looma isticmaali karo in lagu beddelo jeexjeexyada xadhkaha. Kala-duwanaanshaha xayndaabku si toos ah iyo toosan ayaa loo dabaqay si toos ah. Faahfaahin dheeraad ah ka eeg qaybta habaynta

• Qaababka khad dhex-dhexaadka ah iyo kuwa gaarka ah waa in loo arkaa beddelka fasallada wax-bedelka (tusaale, style="--bs-columns: 3;"vs class="row-cols-3").

• Buulku wuxuu u shaqeeyaa si la mid ah, laakiin waxaa laga yaabaa inuu u baahdo inaad dib u dejiso tirooyinka tiirarkaaga tusaale kasta oo buul ah .grid. Faahfaahinta ka eeg qaybta buulka .

Tusaalooyinka

Saddex tiir

Saddex tiir oo ballac siman ah oo ku yaal dhammaan goobaha daawashada iyo aaladaha ayaa la abuuri karaa iyadoo la isticmaalayo .g-col-4fasallada. Ku dar xiisado jawaab celin ah si aad u bedesho qaabka cabbirka daawashada.

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

Ka jawaaba

Isticmaal xiisado jawaab celin ah si aad u hagaajisid qaabkaaga goobaha daawashada. Halkan waxaan ku bilaabaynaa laba tiir oo ku yaal meelaha ugu cidhiidhiga ah, ka dibna waxaan ku koraynaa saddex tiir oo ku yaala daawashada dhexdhexaadka ah iyo korka.

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

Isbarbar dhig taas labadan khariidad ee dhammaan goobaha daawashada.

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

Duubista

Alaabta si otomaatig ah ugu duub xariiqda xigta marka aysan jirin qol kale oo toosan. Ogsoonow in ay gapkhusayso faraqyada toosan iyo kuwa toosan ee u dhexeeya shayada xayndaabka.

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

bilaabay

Casharrada bilawga ah waxay ujeedadoodu tahay in la beddelo fasallada khadka tooska ah, laakiin gebi ahaanba isku mid maaha. CSS Grid waxa ay ku abuurtaa jaantus sharoodi ah iyada oo loo marayo qaabab u sheegaya daalacashada in ay “ka bilow tiirkan” iyo “ku dhammaato tiirkan”. Guryahaasi waa grid-column-startiyo grid-column-end. Casharada bilawga ah waa kuwo gaagaaban kuwii hore. Ku darso fasalada tiirka si ay u cabbiraan una toosi tiirarkaaga si kasta oo aad u baahan tahay. Bilawga fasallada waxay ku bilaabmayaan 1sida 0qiimaha aan ansax ahayn ee guryahan.

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

Tiirar otomaatik ah

Marka aysan jirin fasallo ku jira shayada shabkada (carruurta dhow ee a .grid), shay kasta ayaa si toos ah loogu cabbiri doonaa hal tiir.

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

Dhaqankan waxaa lagu qasi karaa fasalada tiirarka 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>

Buul

Si la mid ah nidaamkayaga khadka tooska ah, CSS Grid wuxuu u oggolaanayaa in si fudud loo buul u galo .grids. Si kastaba ha ahaatee, si ka duwan sida caadiga ah, shabakadani waxay dhaxlisaa isbeddelada safafka, tiirarka, iyo daldaloolada. Ka fiirso tusaalaha hoose:

• Waxaan ku tirtirnaa tirada caadiga ah ee tiirarka leh doorsoome CSS maxalli ah: --bs-columns: 3.
• Tiirka auto-koowaad, tiirka tiirka waa la dhaxlayaa oo tiir kastaa waa saddex-meelood meel ballaca la heli karo.
• Tiirka labaad ee otomaatiga ah, waxaanu dib u dajinay tiirka tiirka ee buulka .gridilaa 12.
• Sadexda tiirka iswada ma laha wax buul ah.

Ficil ahaan tani waxay u ogolaaneysaa qaabayn aad u adag oo gaar ah marka la barbar dhigo nidaamkayaga khadka caadiga ah.

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

Habaynta

Habbee tirada tiirarka, tirada safafka, iyo ballaca bannaan ee doorsoomayaal CSS ah.

Doorsoomayaashan CSS ma laha qiimo caadi ah; Taa beddelkeeda, waxay dabaqaan qiyamka dib-u-dhaca ee la isticmaalo ilaa tusaale maxalli ah laga bixiyo. Tusaale ahaan, waxaanu var(--bs-rows, 1)u isticmaalnaa safafkayaga CSS Grid, kaas oo iska dhega tiraya --bs-rowssababtoo ah taasi meelna weli lama dejin. Mar haddii ay dhacdo, .gridtusaale ahaan wuxuu isticmaali doonaa qiimahaas halkii uu ka isticmaali lahaa qiimaha dib u dhaca ee 1.

Ma jiraan fasalo grid

Cunsurrada carruurta ee isla markaaba ah .gridwaa shay xarrago leh, markaa waa la cabbiri doonaa iyada oo aan si cad loogu darin .g-colfasal.

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

Tiirarka iyo dulduleelada

Hagaajin tirada tiirarka iyo farqiga.

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

Ku darida safafka

Ku daridda safaf badan iyo beddelidda meelaynta tiirarka:

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

Nusqaamaha

Beddel faraqyada toosan kaliya adiga oo wax ka beddelaya row-gap. Ogsoonow in aan isticmaalno gaps .grid, laakiin waa row-gapla column-gapbeddeli karaa haddii loo baahdo.

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

Sababtaas awgeed, waxaad yeelan kartaa s toosan oo kala duwan gap, kuwaas oo qaadan kara hal qiime (dhammaan dhinacyada) ama lammaane qiyam ah (toos iyo jiif). Tan waxa lagu dabaqi karaa qaabka khadka tooska ah ee gap, ama --bs-gapdoorsoomayaashayada 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

Mid ka mid ah xaddidaadda CSS Grid ayaa ah in fasalladayada caadiga ah ay wali abuuraan laba doorsoomayaal Sass, $grid-columnsiyo $grid-gutter-width. Tani waxay si wax ku ool ah u go'aaminaysaa tirada fasallada lagu soo ururiyay CSS-tayada. Waxaad halkan ku leedahay laba ikhtiyaar:

• Wax ka beddel doorsoomayaasha Sass-ka caadiga ah oo dib u ururi CSS kaaga.
• Isticmaal qaab-line ama qaabab gaar ah si aad u kordhiso fasallada la bixiyay.

Tusaale ahaan, waxaad kordhin kartaa tiirka tiirka oo aad bedeli kartaa cabbirka faraqa, ka dibna cabbiri kartaa "Tiirarka" oo leh isku-dhafan qaabab khad dhexdeed ah iyo fasallada safafka CSS ee horay loo sii qeexay (tusaale, .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>