CSS Grid
Dzidza maitiro ekugonesa, kushandisa, uye kugadzirisa yedu imwe dhizaini sisitimu yakavakirwa paCSS Grid nemienzaniso uye zvimedu zvekodhi.
Bootstrap's default grid system inomiririra kupera kweanopfuura makore gumi eCSS magadzirirwo maitiro, akaedzwa uye akaedzwa nemamiriyoni evanhu. Asi, yakagadzirwawo pasina akawanda emazuva ano eCSS maficha uye matekiniki atiri kuona mumabhurawuza senge CSS Grid itsva.
Zvinoshanda sei
NeBootstrap 5, takawedzera sarudzo yekugonesa yakaparadzana grid system yakavakirwa paCSS Grid, asi neBootstrap twist. Iwe uchiri kuwana makirasi iwe aunogona kunyorera pane whim kuti uvake anoteerera marongero, asi neimwe nzira pasi pehodhi.
-
CSS Grid yave kusarudza-kupinda. Dzima iyo default grid system nekuseta
$enable-grid-classes: false
uye gonesa iyo CSS Grid nekuseta$enable-cssgrid: true
. Zvadaro, dzokorora Sass yako. -
Tsiva zviitiko
.row
zve.grid
. Kirasi.grid
inosetadisplay: grid
uye inogadziragrid-template
iyo yaunovaka pairi neHTML yako. -
Tsiva
.col-*
makirasi.g-col-*
nemakirasi. Izvi zvinodaro nekuti yedu CSS Grid makoramu anoshandisa iyogrid-column
pfuma pachinzvimbo chewidth
. -
Makolamu uye saizi yegutter inoiswa kuburikidza neCSS zvinosiyana. Isa izvi pamubereki
.grid
uye gadzirisa chero chaunoda, inline kana musheetti, ine--bs-columns
uye--bs-gap
.
Mune ramangwana, Bootstrap inogona kuchinjika kune yakasanganiswa mhinduro sezvo chivakwa gap
chakawana chinenge chakazara chebhurawuza rutsigiro rweflexbox.
Misiyano mikuru
Kuenzaniswa neiyo default grid system:
-
Flex zvishandiso hazvikanganisi iyo CSS Grid makoramu nenzira imwechete.
-
Magapu anotsiva magata. Iyo
gap
midziyo inotsiva yakachinjikapadding
kubva kune yedu default grid system uye inoshanda zvakanyanya sengemargin
. -
Saka nekudaro, kusiyana
.row
nes,.grid
s haina migero isina kunaka uye margin zvishandiso hazvigone kushandiswa kushandura magita egidhi. Grid gap inoiswa yakachinjika uye yakatwasuka nekukasira. Ona chikamu chekugadzirisa kuti uwane mamwe mashoko. -
Inline uye masitaera etsika anofanirwa kutariswa seanotsiva makirasi ekugadzirisa (semuenzaniso,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting inoshanda zvakafanana, asi ingada kuti iwe uise patsva makoramu ako pane imwe neimwe chiitiko chenested
.grid
. Ona chikamu chekuisa dendere kuti uwane ruzivo.
Mienzaniso
Makoramu matatu
Makoramu matatu akaenzana-akaenzana pamativi ese ekuona uye zvishandiso zvinogona kugadzirwa nekushandisa .g-col-4
makirasi. Wedzera makirasi anoteerera kuti uchinje marongero nehukuru hwekutarisa.
<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>
Anoteerera
Shandisa makirasi anopindura kugadzirisa dhizaini yako pamativi ekuona. Pano tinotanga nemakoramu maviri pane yakamanikana kuona nzvimbo, uye tobva takura kusvika kumakoramu matatu pane epakati maonero uye pamusoro.
<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>
Enzanisa izvo kune iyi mbiri mbiru dhizaini pane ese ekuona nzvimbo.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Kuputira
Grid zvinhu zvinozviputira kumutsara unotevera kana pasisina nzvimbo yakachinjika. Ziva kuti iyo gap
inoshanda kune yakachinjika uye yakatwasuka mikaha pakati pezvinhu zvegiridhi.
<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>
Starts
Makirasi ekutanga anovavarira kutsiva makirasi edu egidhi ekugadzirisa, asi haana kufanana zvachose. CSS Grid inogadzira template yegridi kuburikidza nezvitaera zvinoudza mabhurawuza kuti "tanga pakoramu iyi" uye "kupedzisa pane ino." Zvinhu izvozvo ndezvi grid-column-start
uye grid-column-end
. Makirasi ekutanga mapfupi kune ekare. Vabatanidze nemakirasi emakoramu kuhukuru uye gadzirisa makoramu ako zvisinei iwe zvaunoda. Makirasi ekutanga anotanga 1
semutengo 0
usiri wakakodzera wezvivakwa izvi.
<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 columns
Kana pasina makirasi pazvinhu zvegidhi (vana vekare vea .grid
), chinhu chimwe nechimwe chegiridhi chinozongove chakakura kune imwe koramu.
<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>
Maitiro aya anogona kusanganiswa negrid column makirasi.
<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
Zvakafanana neyedu yekusarudzika grid system, yedu CSS Grid inobvumira kureruka kwe .grid
s. Nekudaro, kusiyana nekusarudzika, iyi grid inogara nhaka shanduko mumitsara, makoramu, uye mapundu. Chimbofunga muenzaniso uri pasi apa:
- Isu tinodarika nhamba yekusarudzika yemakoramu neCSS yemunharaunda:
--bs-columns: 3
. - Mune yekutanga-auto-column, nhamba yekoramu inogarwa uye yega yega chikamu chimwe muzvitatu chehupamhi huripo.
- Mune yechipiri otomatiki-column, isu takaseta zvakare nhamba yekoramu pane yakavakirwa
.grid
kusvika gumi nemaviri (yedu default). - Yechitatu auto-column haina nested content.
Mukuita izvi zvinobvumira mamwe akaomesesa uye etsika marongero kana ichienzaniswa neyedu 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>
Customizing
Gadzirisa nhamba yemakoramu, nhamba yemitsara, uye hupamhi hwemagapu nemhando dzeCSS dzemunharaunda.
Variable | Fallback value | Tsanangudzo |
---|---|---|
--bs-rows |
1 |
Huwandu hwemitsara mune yako grid template |
--bs-columns |
12 |
Huwandu hwemakoramu mune yako grid template |
--bs-gap |
1.5rem |
Saizi yemukana uri pakati pemakoramu (yakatwasuka uye yakachinjika) |
Izvi zvakasiyana-siyana zveCSS hazvina kukwana kukosha; pachinzvimbo, vanoshandisa fallback values dzinoshandiswa kusvikira muenzaniso wemunharaunda wapihwa. Semuenzaniso, isu tinoshandisa var(--bs-rows, 1)
yedu CSS Grid mitsara, iyo inofuratira --bs-rows
nekuti iyo haisati yaiswa chero kupi. Kana zvadaro, .grid
muenzaniso wacho uchashandisa kukosha ikoko pachinzvimbo cheiyo fallback kukosha kwe 1
.
Hapana makirasi egridi
Zvekare vana zvinhu .grid
zvegidhi zvinhu, saka ivo vanozokura pasina kuwedzera .g-col
kirasi.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Columns nemagapu
Gadzirisa nhamba yemakoramu uye gap.
<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>
Kuwedzera mitsara
Kuwedzera mamwe mitsara uye kushandura kuiswa kwemakoramu:
<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
Shandura migero yakatwasuka chete nekugadzirisa iyo row-gap
. Ziva kuti isu tinoshandisa gap
pa .grid
s, asi row-gap
uye column-gap
inogona kugadziridzwa sezvinodiwa.
<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>
Nekuda kweizvozvo, iwe unogona kuve neyakasiyana yakatwasuka uye yakachinjika gap
s, iyo inogona kutora imwechete kukosha (mativi ese) kana peya yemhando (yakatwasuka uye yakachinjika). Izvi zvinogona kuiswa neinline style ye gap
, kana --bs-gap
neCSS yedu inosiyana.
<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
Imwe miganho yeCSS Grid ndeyekuti makirasi edu ekutanga achiri kugadzirwa nemhando mbiri dzeSass, $grid-columns
uye $grid-gutter-width
. Izvi zvinonyatsofanoona huwandu hwemakirasi akagadzirwa muCSS yedu yakaunganidzwa. Une sarudzo mbiri pano:
- Shandura izvo zvimiro zveSass zvakasiyana uye dzorera CSS yako.
- Shandisa inline kana masitaera etsika kuti uwedzere makirasi akapihwa.
Semuenzaniso, unogona kuwedzera kuverenga kwekoramu uye kushandura saizi yegep, uye wobva wawedzera "columns" dzako nemusanganiswa weinline masitaera uye yakafanotsanangurwa CSS Grid makoramu makirasi (semuenzaniso, .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>