CSS Grid

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: falseTora CSS-ê çalak bike $enable-cssgrid: true. Dûv re, Sass-a xwe ji nû ve berhev bikin.

• Replace mînakên .rowbi .grid. Çîn .gridsaz dike display: gridû diafirîne grid-templateku 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 li grid-columnşûna width.

• Stûn û mezinahiyên gutterê bi guhêrbarên CSS-ê têne danîn. Vana li ser dêûbav saz .gridbikin û her çend hûn bixwazin, bi navgîniyê an di şêwazek şêwazê de, bi --bs-columnsû xweş --bs-gapbikin.

Di pêşerojê de, Bootstrap îhtîmal e ku berbi çareseriyek hybrid ve biçe ji ber ku gapxanî 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î gapli şûna horizontî paddingji pergala meya torê ya xwerû vediguhezîne û bêtir wekî margin.

• Bi vî rengî, berevajî .rows, .grids 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 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>

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

Wê bi vê sêwirana du stûnê re li hemî dîmenderan bidin ber hev.

<div class="grid text-center">
  <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 gapji bo valahiyên horizontî û vertîkal ên di navbera hêmanên torê de derbas dibe.

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

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 1bo 0van taybetmendiyan bi nirxek nederbasdar dest pê dikin.

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

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

Ev tevger dikare bi çînên stûna torê re were tevlihev kirin.

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

Nesting

Mîna pergala tora meya xwerû, Tûra meya CSS destûrê dide hêlîna hêsan a .grids. 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ê .gridvegerandiye 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 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>

Customizing

Bi guherbarên CSS yên herêmî re hejmara stûnan, hejmara rêzan, û firehiya valahiyan xweş bikin.

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-rowsji ber ku ew hêj li cîhek nehatiye danîn. Dema ku ew bibe, .gridmînak dê wê nirxê li şûna nirxa paşverû ya 1.

No çînên grid

Hêmanên zarokan ên yekser hêmanên .gridtorê ne, ji ber vê yekê ew ê bêyî ku bi eşkere .g-colçînek zêde bikin mezin dibin.

<div class="grid text-center" 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 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>

Zêdekirina rêzan

Zêdekirina rêzên din û guheztina cîhê stûnan:

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

Gaps

Tenê bi guheztina valahiya vertîkal biguherînin row-gap. Bala xwe bidinê ku em gapli ser .grids bikar tînin, lê row-gapû column-gapli gorî hewcedariyê dikare were guheztin.

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

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-gapguhêrbara meya CSS-ê were sepandin.

<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

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