CSS Grid

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: falsea 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 .rowme .grid. Hoʻonohonoho a hana ka papa i kahi .gridāu e kūkulu ai me kāu HTML.display: gridgrid-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 ka grid-columnwaiwai ma kahi o width.

• 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 .grida hoʻopilikino e like me kou makemake, i loko o ka laina a i ʻole i kahi stylesheet, me ka --bs-columnsa --bs-gap.

I ka wā e hiki mai ana, e hoʻololi paha ʻo Bootstrap i kahi hoʻonā hybrid no ka gapmea 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 gapka waiwai i ka paepae paddingmai kā mākou ʻōnaehana mānoanoa paʻamau a ʻoi aku ka hana e like me margin.

• No laila, ʻaʻole like me .rows, .grids ʻ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;"vs class="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-4papa. Hoʻohui i nā papa pane e hoʻololi i ka hoʻolālā e ka nui 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>

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

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 text-center">
  <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 gappili ana kēia i nā āpau ākea a me ke kūpaʻa ma waena o nā mea kiko.

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

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-starta 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 1ke 0ʻano he waiwai ʻole no kēia mau waiwai.

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

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

Hiki ke hoʻohui ʻia kēia ʻano me nā papa kolamu grid.

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

Nesting

E like me kā mākou ʻōnaehana mānoanoa paʻamau, ʻae kā mākou CSS Grid i ka nesting maʻalahi o .grids. 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 .gridi 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 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>

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.

ʻ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, .gride 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 .gridhe mau mea kikowaena, no laila e hoʻonui ʻia lākou me ka hoʻohui ʻole ʻana i kahi .g-colpapa.

<div class="grid text-center" 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 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>

Hoʻohui lālani

Hoʻohui i nā lālani hou a hoʻololi i ke kau ʻana o nā kolamu:

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

ʻ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 gapma .grids, akā hiki ke hoʻololi ʻia e like row-gapme column-gapka mea e pono ai.

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

Ma muli o ia mea, hiki iā ʻoe ke loaʻa nā ʻokoʻa kūhelu a me nā gaps, 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-gapCSS.

<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

One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

• Modify those default Sass variables and recompile your CSS.
• Use inline or custom styles to augment the provided classes.

For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .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>