CSS Grid

Ang default grid system sa Bootstrap nagrepresentar sa culmination sa kapin sa usa ka dekada sa CSS layout techniques, gisulayan ug gisulayan sa minilyon ka mga tawo. Apan, gibuhat usab kini nga wala’y daghang mga modernong bahin ug teknik sa CSS nga among nakita sa mga browser sama sa bag-ong CSS Grid.

Giunsa kini paglihok

Uban sa Bootstrap 5, gidugang namo ang opsyon aron mahimo ang usa ka bulag nga sistema sa grid nga gitukod sa CSS Grid, apan adunay usa ka Bootstrap twist. Nakakuha ka gihapon og mga klase nga mahimo nimong i-apply sa usa ka kapritso sa paghimo sa mga responsive nga mga layout, apan adunay lahi nga pamaagi sa ilawom sa hood.

• Ang CSS Grid kay opt-in. I-disable ang default grid system pinaagi sa pag-set $enable-grid-classes: falseug pagpagana sa CSS Grid pinaagi sa pag-set $enable-cssgrid: true. Unya, i-compile pag-usab ang imong Sass.

• Ilisan ang mga higayon sa .rowuban sa .grid. Ang .gridklase nagtakda display: gridug nagmugna og usa grid-templatenga imong gitukod gamit ang imong HTML.

• Ilisan ang .col-*mga klase og .g-col-*mga klase. Kini tungod kay ang among CSS Grid nga mga kolum naggamit sa grid-columnkabtangan imbes nga width.

• Ang mga kolum ug mga gidak-on sa gutter gitakda pinaagi sa CSS variables. Ibutang kini sa ginikanan .gridug ipasibo bisan unsa ang imong gusto, inline o sa usa ka stylesheet, nga adunay --bs-columnsug --bs-gap.

Sa umaabot, ang Bootstrap lagmit nga mobalhin sa usa ka hybrid nga solusyon tungod kay ang gapkabtangan nakab-ot ang hapit hingpit nga suporta sa browser alang sa flexbox.

Pangunang mga kalainan

Kung itandi sa default grid system:

• Ang Flex utilities dili makaapekto sa CSS Grid columns sa samang paagi.

• Gipulihan sa mga gaps ang mga kanal. Gipulihan gapsa propiedad ang pinahigda paddinggikan sa among default nga grid system ug naglihok nga sama sa margin.

• Sa ingon, dili sama .rowsa s, .grids walay negatibo nga mga margin ug ang margin utilities dili magamit sa pag-usab sa grid gutters. Ang mga gaps sa grid gigamit nga pinahigda ug patindog pinaagi sa default. Tan-awa ang seksyon sa pag-customize para sa dugang nga mga detalye.

• Ang inline ug custom nga mga estilo kinahanglang tan-awon isip mga kapuli sa mga klase sa modifier (pananglitan, style="--bs-columns: 3;"vs. class="row-cols-3").

• Parehas nga nagtrabaho ang nesting, apan mahimo’g kinahanglan nimo nga i-reset ang imong mga ihap sa kolum sa matag higayon sa usa ka nested .grid. Tan-awa ang seksyon sa nesting para sa mga detalye.

Mga pananglitan

Tulo ka kolum

Tulo ka managsama nga gilapdon nga mga kolum sa tanan nga mga viewport ug mga aparato mahimong mahimo pinaagi sa paggamit sa mga .g-col-4klase. Pagdugang mga responsive nga klase aron mabag-o ang layout pinaagi sa gidak-on sa viewport.

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

Makatubag

Gamita ang mga responsive nga klase aron i-adjust ang imong layout sa mga viewports. Dinhi magsugod kita sa duha ka mga kolum sa labing pig-ot nga viewports, ug dayon motubo ngadto sa tulo ka column sa medium viewports ug pataas.

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

Itandi kana niining duha ka layout sa kolum sa tanang viewports.

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

Pagputos

Ang mga butang sa grid awtomatikong maputos sa sunod nga linya kung wala nay lugar nga pinahigda. Timan-i nga ang gapmagamit sa pinahigda ug bertikal nga mga gintang tali sa mga butang sa grid.

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

Nagsugod

Ang pagsugod sa mga klase nagtumong sa pag-ilis sa among default nga grid nga mga offset nga mga klase, apan dili sila managsama. Ang CSS Grid nagmugna og grid template pinaagi sa mga estilo nga nagsulti sa mga browser nga "magsugod niini nga kolum" ug "magtapos niini nga kolum." Kadtong mga kabtangan mao ang grid-column-startug grid-column-end. Ang pagsugod sa mga klase kay shorthand para sa nauna. Ipares sila sa mga klase sa kolum sa gidak-on ug ipahiangay ang imong mga kolum bisan unsa ang imong kinahanglan. Magsugod ang mga klase sa 1ingon 0nga usa ka dili balido nga kantidad alang niini nga mga kabtangan.

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

Auto nga mga kolum

Kung walay mga klase sa mga butang sa grid (ang mga anak sa usa ka .grid), ang matag butang sa grid awtomatik nga masukod sa usa ka kolum.

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

Kini nga pamatasan mahimong isagol sa mga klase sa kolum sa 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>

Nagsalag

Sama sa among default grid system, ang among CSS Grid nagtugot sa sayon ​​​​nga pagsalag sa .grids. Bisan pa, dili sama sa default, kini nga grid nakapanunod sa mga pagbag-o sa mga laray, kolum, ug mga gintang. Tagda ang pananglitan sa ubos:

• Among gi-override ang default nga gidaghanon sa mga column nga adunay lokal nga CSS variable: --bs-columns: 3.
• Sa una nga auto-column, ang ihap sa kolum napanunod ug ang matag kolum usa ka ikatulo sa magamit nga gilapdon.
• Sa ikaduhang auto-column, among gi-reset ang column count sa nested .gridngadto sa 12 (among default).
• Ang ikatulo nga auto-column walay nested content.

Sa praktis kini nagtugot alang sa mas komplikado ug custom nga mga layout kon itandi sa among default grid system.

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

Pag-customize

Ipasibo ang gidaghanon sa mga kolum, ang gidaghanon sa mga laray, ug ang gilapdon sa mga kal-ang uban sa lokal nga CSS variables.

Kining CSS variables walay default value; hinoon, ilang gipadapat ang fallback values ​​nga gigamit hangtod nga gihatag ang lokal nga instance. Pananglitan, among gigamit var(--bs-rows, 1)para sa among CSS Grid nga mga laray, nga gibalewala --bs-rowstungod kay wala pa kana ibutang bisan asa. Kung mao na, .gridgamiton sa instance kana nga kantidad imbes nga ang fallback nga kantidad sa 1.

Walay mga klase sa grid

Ang mga elemento sa diha -diha nga mga bata .gridmao ang mga butang sa grid, aron sila masukod nga wala’y klaro nga pagdugang usa ka .g-colklase.

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

Mga kolum ug mga kal-ang

I-adjust ang gidaghanon sa mga column ug ang gintang.

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

Pagdugang mga laray

Pagdugang ug dugang nga mga laray ug pag-ilis sa pagbutang sa mga kolum:

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

Mga gaps

Usba ang bertikal gaps lamang pinaagi sa pag-usab sa row-gap. Timan-i nga among gigamit gapsa .grids, apan row-gapug column-gapmahimong usbon kung gikinahanglan.

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

Tungod niana, mahimo ka nga adunay lainlain nga bertikal ug pinahigda nga gaps, nga mahimo’g makuha ang usa ka kantidad (tanan nga kilid) o usa ka pares nga kantidad (bertikal ug pinahigda). Mahimo kini nga magamit sa usa ka inline nga istilo para sa gap, o sa among --bs-gapCSS variable.

<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

Usa ka limitasyon sa CSS Grid mao nga ang among mga default nga klase gihimo gihapon sa duha ka Sass variables, $grid-columnsug $grid-gutter-width. Epektibo kini nga gitino nang daan ang gidaghanon sa mga klase nga nahimo sa among giipon nga CSS. Adunay ka duha ka kapilian dinhi:

• Usba ang mga default nga variable sa Sass ug i-compile ang imong CSS.
• Gamita ang inline o custom nga mga estilo aron madugangan ang gihatag nga mga klase.

Pananglitan, mahimo nimong dugangan ang ihap sa kolum ug usbon ang gidak-on sa gintang, ug dayon i-size ang imong "mga kolum" nga adunay sagol nga inline nga mga estilo ug gitakda nang daan nga mga klase sa kolum sa CSS Grid (pananglitan, .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>