CSS Grid

Kinakatawan ng default na grid system ng Bootstrap ang kulminasyon ng mahigit isang dekada ng mga diskarte sa layout ng CSS, na sinubukan at sinubok ng milyun-milyong tao. Ngunit, ginawa rin ito nang wala ang marami sa mga modernong tampok at diskarte ng CSS na nakikita natin sa mga browser tulad ng bagong CSS Grid.

Paano ito gumagana

Sa Bootstrap 5, idinagdag namin ang opsyon na paganahin ang isang hiwalay na grid system na binuo sa CSS Grid, ngunit may Bootstrap twist. Makakakuha ka pa rin ng mga klase na maaari mong ilapat sa isang kapritso upang bumuo ng mga tumutugon na layout, ngunit may ibang diskarte sa ilalim ng hood.

• Ang CSS Grid ay opt-in. Huwag paganahin ang default na grid system sa pamamagitan ng pagtatakda $enable-grid-classes: falseat paganahin ang CSS Grid sa pamamagitan ng pagtatakda $enable-cssgrid: true. Pagkatapos, i-compile muli ang iyong Sass.

• Palitan ang mga instance ng .rowng .grid. Ang .gridklase ay nagtatakda display: gridat gumagawa ng isang grid-templatena binuo mo gamit ang iyong HTML.

• Palitan ang mga .col-*klase ng mga .g-col-*klase. Ito ay dahil ginagamit ng aming mga CSS Grid column ang grid-columnproperty sa halip na width.

• Ang mga column at laki ng kanal ay itinakda sa pamamagitan ng mga variable ng CSS. Itakda ang mga ito sa magulang .gridat i-customize gayunpaman ang gusto mo, inline o sa isang stylesheet, gamit ang --bs-columnsat --bs-gap.

Sa hinaharap, malamang na lumipat ang Bootstrap sa isang hybrid na solusyon dahil gapnakamit ng property ang halos buong suporta sa browser para sa flexbox.

Mga pangunahing pagkakaiba

Kung ikukumpara sa default na grid system:

• Ang mga flex utilities ay hindi nakakaapekto sa mga column ng CSS Grid sa parehong paraan.

• Pinapalitan ng mga gaps ang mga kanal. gapPinapalitan ng property ang pahalang mula paddingsa aming default na sistema ng grid at gumaganang mas katulad ng margin.

• Dahil dito, hindi katulad ng .rows, .grids ay walang negatibong margin at ang mga margin utility ay hindi maaaring gamitin upang baguhin ang grid gutters. Ang mga grid gaps ay inilapat nang pahalang at patayo bilang default. Tingnan ang seksyong pag-customize para sa higit pang mga detalye.

• Ang mga inline at custom na istilo ay dapat tingnan bilang mga kapalit para sa mga klase ng modifier (hal., style="--bs-columns: 3;"vs class="row-cols-3").

• Parehong gumagana ang nesting, ngunit maaaring mangailangan kang i-reset ang iyong mga bilang ng column sa bawat instance ng isang nested .grid. Tingnan ang seksyon ng nesting para sa mga detalye.

Mga halimbawa

Tatlong column

Tatlong column na pantay-pantay ang lapad sa lahat ng viewport at device ay maaaring gawin sa pamamagitan ng paggamit ng mga .g-col-4klase. Magdagdag ng mga tumutugong klase upang baguhin ang layout ayon sa laki ng viewport.

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

Tumutugon

Gumamit ng mga tumutugong klase para isaayos ang iyong layout sa mga viewport. Dito tayo magsisimula sa dalawang column sa pinakamakitid na viewports, at pagkatapos ay lumaki sa tatlong column sa medium viewports at sa itaas.

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

Ihambing iyon sa layout ng dalawang column na ito sa lahat ng viewport.

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

Pagbabalot

Awtomatikong bumabalot sa susunod na linya ang mga item ng grid kapag wala nang espasyo nang pahalang. Tandaan na gapnalalapat ang mga ito sa pahalang at patayong gaps sa pagitan ng mga grid item.

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

Nagsisimula

Nilalayon ng pagsisimula ng mga klase na palitan ang mga offset na klase ng aming default na grid, ngunit hindi sila ganap na pareho. Gumagawa ang CSS Grid ng template ng grid sa pamamagitan ng mga istilong nagsasabi sa mga browser na “magsimula sa column na ito” at “magtapos sa column na ito.” Ang mga ari-arian na iyon ay grid-column-startat grid-column-end. Ang mga pagsisimula ng klase ay shorthand para sa dating. Ipares ang mga ito sa mga klase ng column sa laki at ihanay ang iyong mga column gayunpaman kailangan mo. Magsisimula ang mga klase sa 1bilang 0ay isang di-wastong halaga para sa mga katangiang ito.

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

Auto column

Kapag walang klase sa mga item sa grid (ang mga agarang anak ng isang .grid), awtomatikong magiging isang column ang bawat grid item.

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

Maaaring ihalo ang pag-uugaling ito sa mga klase ng grid column.

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

Pugad

Katulad ng aming default na grid system, ang aming CSS Grid ay nagbibigay-daan para sa madaling pagpupugad ng .grids. Gayunpaman, hindi tulad ng default, ang grid na ito ay namamana ng mga pagbabago sa mga row, column, at gaps. Isaalang-alang ang halimbawa sa ibaba:

• Ino-override namin ang default na bilang ng mga column na may lokal na variable ng CSS: --bs-columns: 3.
• Sa unang auto-column, minana ang bilang ng column at ang bawat column ay isang-katlo ng available na lapad.
• Sa pangalawang auto-column, ni-reset namin ang bilang ng column sa nested .gridsa 12 (aming default).
• Walang nested content ang ikatlong auto-column.

Sa pagsasagawa, nagbibigay-daan ito para sa mas kumplikado at custom na mga layout kapag inihambing sa aming default na grid system.

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

Pag-customize

I-customize ang bilang ng mga column, ang bilang ng mga row, at ang lapad ng mga gaps gamit ang mga lokal na variable ng CSS.

Ang mga variable na CSS na ito ay walang default na halaga; sa halip, naglalapat sila ng mga fallback value na ginagamit hanggang sa magbigay ng lokal na instance. Halimbawa, ginagamit namin var(--bs-rows, 1)para sa aming mga CSS Grid row, na binabalewala --bs-rowsdahil hindi pa iyon naitakda kahit saan. Kapag ito na, .gridgagamitin ng instance ang value na iyon sa halip na ang fallback na value ng 1.

Walang mga klase sa grid

Ang mga elemento ng agarang bata .griday mga grid na item, kaya susukitin ang mga ito nang hindi tahasang nagdaragdag ng .g-colklase.

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

Mga hanay at puwang

Ayusin ang bilang ng mga column at ang puwang.

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

Pagdaragdag ng mga hilera

Pagdaragdag ng higit pang mga row at pagpapalit ng placement ng mga column:

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

Mga gaps

Baguhin lamang ang mga vertical gaps sa pamamagitan ng pagbabago sa row-gap. Tandaan na ginagamit namin gapsa .grids, ngunit row-gapat column-gapmaaaring baguhin kung kinakailangan.

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

Dahil doon, maaari kang magkaroon ng iba't ibang vertical at horizontal gaps, na maaaring tumagal ng isang halaga (lahat ng panig) o isang pares ng mga halaga (vertical at horizontal). Maaari itong ilapat sa isang inline na istilo para sa gap, o sa aming --bs-gapCSS variable.

<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

Ang isang limitasyon ng CSS Grid ay ang aming mga default na klase ay binubuo pa rin ng dalawang Sass variable, $grid-columnsat $grid-gutter-width. Ito ay epektibong natukoy ang bilang ng mga klase na nabuo sa aming pinagsama-samang CSS. Mayroon kang dalawang pagpipilian dito:

• Baguhin ang mga default na variable ng Sass na iyon at muling i-compile ang iyong CSS.
• Gumamit ng mga inline o custom na istilo para dagdagan ang mga ibinigay na klase.

Halimbawa, maaari mong pataasin ang bilang ng column at baguhin ang laki ng gap, at pagkatapos ay palakihin ang iyong "mga column" na may halo ng mga inline na istilo at mga paunang natukoy na klase ng column ng CSS Grid (hal, .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>