CSS Grid
Fêr bibin ka meriv çawa bi mînak û perçeyên kodê pergala meya cîhêreng a ku li ser CSS Grid hatî çêkirin çalak, bikar bîne û xweş bike.
Pergala torê ya xwerû ya Bootstrap lûtkeya zêdetirî deh salan teknîkên sêwirana CSS-ê, ku ji hêla bi mîlyonan kesan ve hatî ceribandin û ceribandin, temsîl dike. Lê, ew di heman demê de bêyî gelek taybetmendî û teknîkên nûjen ên CSS-ê ku em di gerokên mîna CSS Grid-a nû de dibînin, hate afirandin.
Çawa dixebite
Bi Bootstrap 5-ê re, me vebijarkek zêde kir ku pergala torê ya cihê ku li ser CSS Grid-ê hatî çêkirin çalak bike, lê bi zivirînek Bootstrap. Hûn hîn jî dersan digirin ku hûn dikarin li ser kêfê serlêdan bikin da ku sêwiranên bersivdar ava bikin, lê bi nêzîkatiyek cihêreng di bin kavilê de.
-
CSS Grid vebijark e. Ji hêla mîhengê ve pergala torê ya xwerû neçalak bike û bi mîhengê
$enable-grid-classes: false
Tora CSS-ê çalak bike$enable-cssgrid: true
. Dûv re, Sass-a xwe ji nû ve berhev bikin. -
Replace mînakên
.row
bi.grid
. Çîn.grid
saz dikedisplay: grid
û diafirînegrid-template
ku hûn bi HTML-a xwe re li ser ava dikin. -
Li şûna
.col-*
dersan bi.g-col-*
dersan. Ev ji ber ku stûnên me yên CSS Grid ligrid-column
şûnawidth
. -
Stûn û mezinahiyên gutterê bi guhêrbarên CSS-ê têne danîn. Vana li ser dêûbav saz
.grid
bikin û her çend hûn bixwazin, bi navgîniyê an di şêwazek şêwazê de, bi--bs-columns
û xweş--bs-gap
bikin.
Di pêşerojê de, Bootstrap îhtîmal e ku berbi çareseriyek hybrid ve biçe ji ber ku gap
xanî ji bo flexbox-ê hema hema piştgirîya gerokê ya tevahî bi dest xistiye.
Cudahiyên sereke
Li gorî pergala torê ya xwerû:
-
Karûbarên Flex bi heman rengî bandorê li stûnên CSS Grid nakin.
-
Gaps şûna gemaran digire. Taybetmendî
gap
li şûna horizontîpadding
ji pergala meya torê ya xwerû vediguhezîne û bêtir wekîmargin
. -
Bi vî rengî, berevajî
.row
s,.grid
s xwedan margînên neyînî nîn in û karûbarên marjînal nayên bikar anîn ji bo guheztina kelûpelên torê. Valahiyên torê ji hêla xwerû ve horizontî û vertîkal têne sepandin. Ji bo bêtir agahdarî li beşa xwerû binihêrin. -
Divê şêwazên xêzkirî û xwerû wekî şûna çînên guhêrbar werin dîtin (mînak, li hember
style="--bs-columns: 3;"
)class="row-cols-3"
. -
Nesting bi heman rengî dixebite, lê dibe ku ji we hewce bike ku hûn jimareyên stûnên xwe li ser her mînakek hêlînê ji nû ve bikin
.grid
. Ji bo hûragahiyan li beşa hêlînê binêre.
Examples
Sê stûn
Sê stûnên wekhev-fireh li ser hemî dîmender û cîhazan dikarin bi karanîna .g-col-4
çînan werin afirandin. Dersên bersivdar lê zêde bikin da ku sêwiranê li gorî mezinahiya dîmenderê biguhezînin.
<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>
Pêrakirin
Dersên bersivdar bikar bînin da ku sêwirana xwe li seranserê dîmenderan rast bikin. Li vir em bi du stûnên li ser dîmenên herî teng dest pê dikin, û dûv re li ser dîmenderên navîn û jorîn sê stûnan mezin dibin.
<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>
Wê bi vê sêwirana du stûnê re li hemî dîmenderan bidin ber hev.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Wrapping
Dema ku jûreyek horizontî tune be, hêmanên torê bixweber dikevin rêza din. Bala xwe bidinê ku ew gap
ji bo valahiyên horizontî û vertîkal ên di navbera hêmanên torê de derbas dibe.
<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>
Dest pê dike
Armanca dersên destpêkê ew e ku li şûna dersên meya xwerû ya tora xwerû biguhezînin, lê ew bi tevahî ne yek in. CSS Grid bi şêwazên ku ji gerokan re dibêjin "ji vê stûnê dest pê bikin" û "li vê stûnê biqede" şablonek torê diafirîne. Ew milk in grid-column-start
û grid-column-end
. Dersên destpêkê ji bo yên berê kurtenivîs in. Wan bi çînên stûnê re hev bikin ku mezin bikin û stûnên xwe li gorî ku hûn hewce ne bikin hev. Dersên destpêkê ji 1
bo 0
van taybetmendiyan bi nirxek nederbasdar dest pê dikin.
<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>
Stûnên Auto
Gava ku li ser hêmanên torê ders tune ne (zarokên tavilê yên a .grid
), dê her tûreyek bixweber bi yek stûnê were mezin kirin.
<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>
Ev tevger dikare bi çînên stûna torê re were tevlihev kirin.
<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>
Nesting
Mîna pergala tora meya xwerû, Tûra meya CSS destûrê dide hêlîna hêsan a .grid
s. Lêbelê, berevajî ya xwerû, ev tora guheztinên di rêz, stûn û valahiyan de mîras digire. Mînaka jêrîn bifikirin:
- Em bi guhêrbarek CSS-ê ya herêmî ve hejmara stûnên xwerû vediguhezînin:
--bs-columns: 3
. - Di yekem stûna xweser de, hejmartina stûnê mîras e û her stûn yek ji sê parên firehiya berdest e.
- Di sitûna otomatîkî ya duyemîn de, me jimara stûna li ser hêlînê
.grid
vegerandiye 12-ê (xweseriya me). - Stûna sêyem oto naverok tune ye.
Di pratîkê de dema ku li gorî pergala meya torê ya xwerû tê berhev kirin ev rê dide sêwiranên tevlihev û xwerû.
<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
Bi guherbarên CSS yên herêmî re hejmara stûnan, hejmara rêzan, û firehiya valahiyan xweş bikin.
Têgûherr | Nirxa paşveçûnê | Terîf |
---|---|---|
--bs-rows |
1 |
Hejmara rêzên di şablonê tora we de |
--bs-columns |
12 |
Hejmara stûnên di şablonê tora we de |
--bs-gap |
1.5rem |
Mezinahiya valahiya di navbera stûnan de (vertikal û horizontî) |
Van guhêrbarên CSS nirxa xwerû tune; li şûna wê, ew nirxên paşverû yên ku têne bikar anîn heta ku mînakek herêmî peyda bikin bicîh dikin. Mînakî, em ji var(--bs-rows, 1)
bo rêzikên xwe yên CSS Grid bikar tînin, ku paşguh dike --bs-rows
ji ber ku ew hêj li cîhek nehatiye danîn. Dema ku ew bibe, .grid
mînak dê wê nirxê li şûna nirxa paşverû ya 1
.
No çînên grid
Hêmanên zarokan ên yekser hêmanên .grid
torê ne, ji ber vê yekê ew ê bêyî ku bi eşkere .g-col
çînek zêde bikin mezin dibin.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Stûn û valahî
Hejmara stûnan û valahiyê eyar bikin.
<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>
Zêdekirina rêzan
Zêdekirina rêzên din û guheztina cîhê stûnan:
<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>
Gaps
Tenê bi guheztina valahiya vertîkal biguherînin row-gap
. Bala xwe bidinê ku em gap
li ser .grid
s bikar tînin, lê row-gap
û column-gap
li gorî hewcedariyê dikare were guheztin.
<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>
Ji ber vê yekê, hûn dikarin s-yên vertîkal û horizontî yên cûda hebin gap
, ku dikarin nirxek yekane (hemû alî) an cotek nirxan (vertikal û horizontî) bigirin. Ev dikare bi şêwazek hundurîn ji bo gap
, an bi --bs-gap
guhêrbara meya CSS-ê were sepandin.
<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
Yek tixûbdarkirina CSS Grid ev e ku dersên meyên xwerû hîn jî ji hêla du guherbarên Sass ve têne çêkirin, $grid-columns
û $grid-gutter-width
. Ev bi bandor hejmara dersên ku di CSS-ya meya berhevkirî de têne hilberandin pêşdibistanê diyar dike. Li vir du vebijarkên we hene:
- Van guhêrbarên xwerû yên Sass biguhezînin û CSS-ya xwe ji nû ve berhev bikin.
- Ji bo zêdekirina dersên peydakirî şêwazên hundurîn an xwerû bikar bînin.
Mînakî, hûn dikarin jimara stûnê zêde bikin û mezinahiya valahiyê biguhezînin, û dûv re "stûnên" xwe bi tevliheviyek şêwazên hundurîn û çînên stûnê yên CSS Grid-ê yên pêşwext diyarkirî mezin bikin (mînak, .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>