CSS Grid
E aʻo pehea e hiki ai, hoʻohana, a hana i kā mākou ʻōnaehana hoʻonohonoho ʻokoʻa i kūkulu ʻia ma CSS Grid me nā laʻana a me nā snippet code.
Hōʻike ka ʻōnaehana grid paʻamau o Bootstrap i ka hopena o nā makahiki he ʻumi o nā ʻenehana hoʻolālā CSS, hoʻāʻo a hoʻāʻo ʻia e nā miliona o ka poʻe. Akā, ua hana ʻia me ka nui ʻole o nā hiʻohiʻona CSS hou a me nā ʻenehana a mākou e ʻike nei i nā polokalamu kele pūnaewele e like me ka CSS Grid hou.
Pehea e hana ai
Me Bootstrap 5, ua hoʻohui mākou i ke koho e hiki ai i kahi ʻōnaehana hoʻokaʻawale ʻokoʻa i kūkulu ʻia ma CSS Grid, akā me kahi wili Bootstrap. Loaʻa iā ʻoe nā papa e hiki ai iā ʻoe ke noi ma ka makemake e kūkulu i nā hoʻolālā pane, akā me kahi ala ʻē aʻe ma lalo o ka pā.
-
Hoʻokomo ʻia ka CSS Grid. Hoʻopau i ka ʻōnaehana paʻamau ma ka hoʻonohonoho ʻana
$enable-grid-classes: false
a hiki i ka CSS Grid ma ka hoʻonohonoho ʻana$enable-cssgrid: true
. A laila, hoʻohui hou i kāu Sass. -
Hoʻololi i nā manawa o
.row
me.grid
. Hoʻonohonoho a hana ka papa i kahi.grid
āu e kūkulu ai me kāu HTML.display: grid
grid-template
-
E hoʻololi
.col-*
i nā papa me.g-col-*
nā papa. No ka mea, hoʻohana kā mākou kolamu CSS Grid i kagrid-column
waiwai ma kahi owidth
. -
Hoʻonohonoho ʻia nā kolamu a me ka nui o ka auwai ma o nā ʻano CSS. E hoʻonoho i kēia mau mea ma luna o ka makua
.grid
a hoʻopilikino e like me kou makemake, i loko o ka laina a i ʻole i kahi stylesheet, me ka--bs-columns
a--bs-gap
.
I ka wā e hiki mai ana, e hoʻololi paha ʻo Bootstrap i kahi hoʻonā hybrid no ka gap
mea ua loaʻa i ka waiwai ke kākoʻo piha piha no ka flexbox.
Nā ʻokoʻa nui
Hoʻohālikelike ʻia me ka ʻōnaehana mākia paʻamau:
-
ʻAʻole pili nā pono hana Flex i nā kolamu CSS Grid ma ke ʻano like.
-
Hoʻololi ʻo Gaps i nā auwai. Hoʻololi
gap
ka waiwai i ka paepaepadding
mai kā mākou ʻōnaehana mānoanoa paʻamau a ʻoi aku ka hana e like memargin
. -
No laila, ʻaʻole like me
.row
s,.grid
s ʻaʻohe palena maikaʻi ʻole a ʻaʻole hiki ke hoʻohana ʻia nā pono hana palena no ka hoʻololi ʻana i nā auwai. Hoʻohana ʻia nā ʻāwaha mānoanoa ma ke ʻano paʻamau. E ʻike i ka ʻāpana hana no nā kikoʻī hou aku. -
Pono e nānā ʻia nā ʻano inline a maʻamau ma ke ʻano he pani no nā papa hoʻololi (e laʻa,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Hana like ʻo Nesting, akā pono paha ʻoe e hoʻihoʻi i kāu helu kolamu ma kēlā me kēia manawa o kahi pūnana
.grid
. E ʻike i ka ʻāpana nesting no nā kikoʻī.
Nā laʻana
ʻEkolu kolamu
Hiki ke hana ʻia ʻekolu kolamu like-ākea ma nā ʻaoʻao a pau a me nā mea hana me ka hoʻohana ʻana i nā .g-col-4
papa. Hoʻohui i nā papa pane e hoʻololi i ka hoʻolālā e ka nui 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>
Pane
E hoʻohana i nā papa pane no ka hoʻoponopono ʻana i kāu hoʻolālā ma nā wahi nānā. Maanei e hoʻomaka ai mākou me ʻelua kolamu ma nā puka ʻike haiki loa, a laila e ulu aʻe i ʻekolu kolamu ma nā puka ʻike waena a ma luna.
<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>
E hoʻohālikelike i kēia me kēia hoʻolālā kolamu ʻelua ma nā wahi nānā a pau.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ʻOkaʻi ʻana
Hoʻopili 'akomi 'ia nā 'ikamu ma ka laina aʻe inā ʻaʻohe lumi ma ka ʻaoʻao. E hoʻomaopopo e gap
pili ana kēia i nā āpau ākea a me ke kūpaʻa ma waena o nā mea kiko.
<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>
Hoʻomaka
Hoʻomaka nā papa hoʻomaka e pani i nā papa offset o kā mākou pahu paʻamau, akā ʻaʻole like lākou. Hoʻokumu ʻo CSS Grid i kahi template grid ma o nā kaila e haʻi i ka poʻe mākaʻikaʻi e "hoʻomaka ma kēia kolamu" a "hoʻopau ma kēia kolamu." ʻO ia mau waiwai grid-column-start
a me grid-column-end
. He pōkole nā papa hoʻomaka no ka papa mua. E hoʻohui iā lākou me nā papa kolamu i ka nui a hoʻohālikelike i kāu mau kolamu e like me kou makemake. Hoʻomaka nā papa hoʻomaka ma 1
ke 0
ʻano he waiwai ʻole no kēia mau waiwai.
<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>
Nā kolamu kaʻa
Inā ʻaʻohe papa ma nā ʻikamu mānoanoa (nā keiki koke o a .grid
), e hoʻonui ʻakomi ʻia kēlā me kēia mea kiko i hoʻokahi kolamu.
<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>
Hiki ke hoʻohui ʻia kēia ʻano me nā papa kolamu 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>
Nesting
E like me kā mākou ʻōnaehana mānoanoa paʻamau, ʻae kā mākou CSS Grid i ka nesting maʻalahi o .grid
s. Eia naʻe, ʻaʻole like me ka mea paʻamau, loaʻa i kēia māka nā loli i nā lālani, kolamu, a me nā āpau. E noʻonoʻo i ka laʻana ma lalo nei:
- Hoʻopau mākou i ka helu paʻamau o nā kolamu me kahi hoʻololi CSS kūloko:
--bs-columns: 3
. - Ma ke kolamu-aunoa mua, ua hoʻoili ʻia ka helu kolamu a ʻo kēlā me kēia kolamu he hapakolu o ka laula i loaʻa.
- Ma ke kolamu ʻokoʻa ʻelua, ua hoʻonohonoho hou mākou i ka helu kolamu ma ka pūnana
.grid
i 12 (ko mākou paʻamau). - ʻAʻohe maʻiʻo nested ma ke kolamu ʻokoʻa ʻekolu.
Ma ka hoʻomaʻamaʻa ʻana e hiki ai i nā hoʻolālā paʻakikī a maʻamau ke hoʻohālikelike ʻia me kā mākou ʻōnaehana grid default.
<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>
Hoʻopilikino
Hoʻopilikino i ka helu o nā kolamu, ka helu o nā lālani, a me ka laula o nā āpau me nā mea hoʻololi CSS kūloko.
Hoʻololi | Waiwai hāʻule | wehewehe |
---|---|---|
--bs-rows |
1 |
ʻO ka helu o nā lālani i kāu hoʻopalapala mākia |
--bs-columns |
12 |
ʻO ka helu o nā kolamu i kāu hoʻopalapala mākia |
--bs-gap |
1.5rem |
ʻO ka nui o ka ʻokoʻa ma waena o nā kolamu (kū a me ka pae) |
ʻAʻohe waiwai paʻamau kēia mau hoʻololi CSS; akā, hoʻohana lākou i nā waiwai hāʻule i hoʻohana ʻia a hiki i ka hāʻawi ʻia ʻana o kahi hiʻohiʻona kūloko. No ka laʻana, hoʻohana mākou var(--bs-rows, 1)
no kā mākou CSS Grid lālani, ka mea i hoʻowahāwahā --bs-rows
ʻia no ka mea ʻaʻole i hoʻonohonoho ʻia ma nā wahi āpau. I ka wā e hiki mai ana, .grid
e hoʻohana ka instance i kēlā waiwai ma mua o ka waiwai fallback o 1
.
ʻAʻohe papa mākia
ʻO nā mea ʻokoʻa o nā keiki .grid
he mau mea kikowaena, no laila e hoʻonui ʻia lākou me ka hoʻohui ʻole ʻana i kahi .g-col
papa.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Nā kolamu a me nā hakahaka
E hoʻoponopono i ka helu o nā kolamu a me ka hakahaka.
<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>
Hoʻohui lālani
Hoʻohui i nā lālani hou a hoʻololi i ke kau ʻana o nā kolamu:
<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>
ʻAha
E hoʻololi i nā āpau kū pololei ma ka hoʻololi ʻana i ka row-gap
. E hoʻomaopopo e hoʻohana mākou gap
ma .grid
s, akā hiki ke hoʻololi ʻia e like row-gap
me column-gap
ka mea e pono ai.
<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>
Ma muli o ia mea, hiki iā ʻoe ke loaʻa nā ʻokoʻa kūhelu a me nā gap
s, hiki ke lawe i kahi waiwai hoʻokahi (nā ʻaoʻao āpau) a i ʻole nā helu ʻelua (kū a me ka pae). Hiki ke hoʻohana ʻia kēia me ke ʻano inline no gap
, a i ʻole me kā mākou ʻano --bs-gap
CSS.
<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
Hoʻokahi palena o ka CSS Grid ʻo ia ka hana ʻana o kā mākou papa paʻamau e ʻelua mau ʻano Sass, $grid-columns
a me $grid-gutter-width
. Hoʻoholo maikaʻi kēia i ka helu o nā papa i hana ʻia i kā mākou CSS i hōʻuluʻulu ʻia. ʻElua kāu koho ma aneʻi:
- Hoʻololi i kēlā mau hoʻololi Sass paʻamau a hoʻohui hou i kāu CSS.
- E hoʻohana i nā ʻano inline a i ʻole nā ʻano maʻamau e hoʻonui i nā papa i hāʻawi ʻia.
No ka laʻana, hiki iā ʻoe ke hoʻonui i ka helu kolamu a hoʻololi i ka nui ākea, a laila hoʻonui i kāu "koluma" me kahi hui o nā ʻano inline a me nā papa kolamu CSS Grid i koho mua ʻia (e laʻa, .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>