CSS Grid
Matutunan kung paano i-enable, gamitin, at i-customize ang aming kahaliling layout system na binuo sa CSS Grid na may mga halimbawa at snippet ng code.
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: false
at paganahin ang CSS Grid sa pamamagitan ng pagtatakda$enable-cssgrid: true
. Pagkatapos, i-compile muli ang iyong Sass. -
Palitan ang mga instance ng
.row
ng.grid
. Ang.grid
klase ay nagtatakdadisplay: grid
at gumagawa ng isanggrid-template
na 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 anggrid-column
property sa halip nawidth
. -
Ang mga column at laki ng kanal ay itinakda sa pamamagitan ng mga variable ng CSS. Itakda ang mga ito sa magulang
.grid
at i-customize gayunpaman ang gusto mo, inline o sa isang stylesheet, gamit ang--bs-columns
at--bs-gap
.
Sa hinaharap, malamang na lumipat ang Bootstrap sa isang hybrid na solusyon dahil gap
nakamit ng property ang halos buong suporta sa browser para sa flexbox.
Mga pangunahing pagkakaiba
Kung ikukumpara sa default na grid system:
-
Ang mga flex utility ay hindi nakakaapekto sa mga column ng CSS Grid sa parehong paraan.
-
Pinapalitan ng mga gaps ang mga kanal.
gap
Pinapalitan ng property ang pahalang mulapadding
sa aming default na sistema ng grid at gumaganang mas katulad ngmargin
. -
Dahil dito, hindi katulad ng
.row
s,.grid
s ay walang mga 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;"
vsclass="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-4
klase. Magdagdag ng mga tumutugong klase upang baguhin ang layout ayon sa laki ng 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>
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">
<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">
<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 gap
nalalapat ang mga ito sa pahalang at patayong gaps sa pagitan ng mga grid item.
<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>
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-start
at 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 1
bilang 0
ay isang di-wastong halaga para sa mga katangiang ito.
<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 column
Kapag walang mga klase sa grid item (ang mga agarang anak ng isang .grid
), ang bawat grid item ay awtomatikong magiging laki sa isang column.
<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>
Ang pag-uugali na ito ay maaaring ihalo sa mga klase ng grid column.
<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>
Pugad
Katulad ng aming default na grid system, ang aming CSS Grid ay nagbibigay-daan para sa madaling pagpupugad ng .grid
s. Gayunpaman, hindi tulad ng default, ang grid na ito ay nagmamana 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
.grid
sa 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" 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.
Variable | Fallback na halaga | Paglalarawan |
---|---|---|
--bs-rows |
1 |
Ang bilang ng mga row sa iyong grid template |
--bs-columns |
12 |
Ang bilang ng mga column sa iyong grid template |
--bs-gap |
1.5rem |
Ang laki ng agwat sa pagitan ng mga column (vertical at horizontal) |
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-rows
dahil hindi pa iyon naitakda kahit saan. Kapag ito na, .grid
gagamitin 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 .grid
ay mga grid na item, kaya susukitin ang mga ito nang hindi tahasang nagdaragdag ng .g-col
klase.
<div class="grid" 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" 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>
Pagdaragdag ng mga hilera
Pagdaragdag ng higit pang mga row at pagpapalit ng placement ng mga column:
<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
Baguhin lamang ang mga vertical gaps sa pamamagitan ng pagbabago sa row-gap
. Tandaan na ginagamit namin gap
sa .grid
s, ngunit row-gap
at column-gap
maaaring baguhin kung kinakailangan.
<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>
Dahil doon, maaari kang magkaroon ng iba't ibang vertical at horizontal gap
s, 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-gap
CSS 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
Ang isang limitasyon ng CSS Grid ay ang aming mga default na klase ay binubuo pa rin ng dalawang Sass variable, $grid-columns
at $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 dagdagan ang bilang ng column at baguhin ang laki ng gap, at pagkatapos ay sukatin 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" 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>