CSS Grid
Baro sida loo suurtageliyo, loo isticmaalo, oo loo habeeyo nidaamka qaabaynta beddelka ah ee lagu dhisay CSS Grid oo wata tusaalooyin iyo qaybo kood ah.
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: false
oo awood u siinaya CSS Grid adiga oo dejinaya$enable-cssgrid: true
. Kadib, dib u soo celi Sass-kaaga. -
.row
Ku beddel tusaalooyinka.grid
. Fasalka.grid
wuxuu dejiyaadisplay: grid
oo abuuraa midgrid-template
aad ku dhisto HTML-kaaga. -
.col-*
Fasallada ku beddel.g-col-*
fasallo. Tani waa sababta oo ah tiirarkayada CSS Grid waxay isticmaalaangrid-column
hantida halkii ay ka isticmaali lahaayeenwidth
. -
Tiirarka iyo cabbirrada qulqulka waxaa lagu dejiyey doorsoomayaasha CSS. Ku dheji kuwan waalidka
.grid
oo habbee si kasta oo aad rabto, khad dhexdeed ah ama qaab xaashi, leh--bs-columns
iyo--bs-gap
.
Mustaqbalka, Bootstrap waxay u badan tahay inay u beddesho xal isku-dhafan sidagap
hantidu 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
gap
waxay beddeshaa jiifkapadding
ka jira nidaamkayaga shabagga ah wuxuuna u shaqeeyaa si ka sii badanmargin
. -
Sidan oo kale, si ka duwan
.row
s,.grid
s 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;"
vsclass="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-4
fasallada. Ku dar xiisado jawaab celin ah si aad u bedesho qaabka cabbirka daawashada.
<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>
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">
<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">
<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 gap
khusayso faraqyada toosan iyo kuwa toosan ee u dhexeeya shayada xayndaabka.
<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>
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-start
iyo 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 1
sida 0
qiimaha aan ansax ahayn ee guryahan.
<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>
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">
<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">
<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 .grid
s. 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
.grid
ilaa 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" 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.
La beddeli karo | Qiimaha dib u dhaca | Sharaxaada |
---|---|---|
--bs-rows |
1 |
Tirada safafka ku jira qaab-dhismeedkaaga sharoobada |
--bs-columns |
12 |
Tirada tiirarka ku jira jaantuska sharoobadaada |
--bs-gap |
1.5rem |
Baaxadda faraqa u dhexeeya tiirarka (toosan iyo toosan) |
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-rows
sababtoo ah taasi meelna weli lama dejin. Mar haddii ay dhacdo, .grid
tusaale ahaan wuxuu isticmaali doonaa qiimahaas halkii uu ka isticmaali lahaa qiimaha dib u dhaca1
.
Ma jiraan fasalo grid
Cunsurrada carruurta ee isla markaaba ah .grid
waa shay xarrago leh, markaa waa la cabbiri doonaa iyada oo aan si cad loogu darin .g-col
fasal.
<div class="grid" 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" 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>
Ku darida safafka
Ku daridda safaf badan iyo beddelidda meelaynta tiirarka:
<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>
Nusqaamaha
Beddel faraqyada toosan kaliya adiga oo wax ka beddelaya row-gap
. Ogsoonow in aan isticmaalno gap
s .grid
, laakiin waa row-gap
la column-gap
beddeli karaa haddii loo baahdo.
<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>
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-gap
doorsoomayaashayada 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
Mid ka mid ah xaddidaadda CSS Grid ayaa ah in fasalladayada caadiga ah ay wali abuuraan laba doorsoomayaal Sass, $grid-columns
iyo $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" 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>