CSS Mātiti

Ko te punaha matiti taunoa a Bootstrap e tohu ana i te mutunga o nga tikanga whakatakotoranga CSS neke atu i te tekau tau, i whakamatauria, i whakamatauria e te miriona taangata. Engari, he mea hanga kaore he maha o nga ahuatanga CSS hou me nga tikanga e kitea ana i roto i nga kaitirotiro penei i te Matiti CSS hou.

Pehea te mahi

Ma te Bootstrap 5, kua taapirihia e matou te whiringa kia taea ai he punaha matiti motuhake kua hangaia ki runga CSS Grid, engari me te kowhiri Bootstrap. Ka whiwhi tonu koe i nga karaehe ka taea e koe te tono i runga i te hiahia ki te hanga i nga whakatakotoranga aro, engari me te huarahi rereke i raro i te awhi.

• Ko te Matiti CSS te whakauru. Monokia te pūnaha mātiti taunoa mā te tautuhi $enable-grid-classes: falseme te whakahohe i te Mātiti CSS mā te tautuhi $enable-cssgrid: true. Na, whakahiatohia to Sass.

• Tuhinga o .rowmua .grid. Ka .gridwhakatakotohia e te karaehe display: gridhe grid-templatemea hanga e koe me to HTML.

• Whakakapihia .col-*nga karaehe ki .g-col-*nga karaehe. Ko tenei na te mea ka whakamahia e a maatau pou matiti CSS te grid-columntaonga hei utu mo te width.

• Ko nga pou me nga rahi o te awaawa ka whakatauhia ma nga taurangi CSS. Whakatakotoria enei ki runga i te matua .gridme te whakarite kia rite ki taau e hiahia ana, i roto i te raarangi, i te pepa ahua ranei, --bs-columnsme te --bs-gap.

Hei nga ra kei te heke mai, ka huri pea a Bootstrap ki tetahi otinga ranu i te gapmea kua tutuki te rawa ki te tautoko tirotiro mo te flexbox.

Nga rereketanga matua

Ka whakaritea ki te pūnaha mātiti taunoa:

• Ko nga taputapu Flex e kore e pa ki nga pou Matiti CSS i te ara ano.

• Ka whakakapihia e nga aputa nga awaawa. Ka gapwhakakapihia e te taonga te whakapae paddingmai i ta maatau punaha matiti taunoa me te mahi pera ano margin.

• Ko te penei, he rereke ki .rowte s, .gridkarekau he tawhē kino, ā, kāore e taea te whakamahi i ngā taputapu tawhē hei huri i ngā awaawa mātiti. Ko nga aputa matiti ka hoatu whakapae me te poutū ma te taunoa. Tirohia te waahanga whakarite mo etahi atu korero.

• Ko nga momo rarangi me nga momo ritenga me tirohia hei whakakapi mo nga karaehe whakarereke (hei tauira, style="--bs-columns: 3;"vs class="row-cols-3").

• He rite tonu te mahi o te kohanga, engari ka hiahia pea koe ki te tautuhi ano i nga kaute o te pou mo ia tauira o te kohanga .grid. Tirohia te waahanga kohanga mo nga taipitopito.

Tauira

E toru nga pou

E toru nga pou rite-whanui puta noa i nga tauranga tirohanga me nga taputapu ka taea te hanga ma te whakamahi i nga .g-col-4karaehe. Taapirihia nga karaehe urupare hei whakarereke i te tahora ma te rahi o te tauranga tirohanga.

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

Whakautu

Whakamahia nga karaehe aro ki te whakatika i to tahora puta noa i nga tauranga tirohanga. I konei ka timata me nga pou e rua i runga i nga tauranga tiro whaiti rawa atu, katahi ka tipu ki nga pou e toru i runga i nga tauranga waenga me runga ake.

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

Whakatauritea ki tenei tahora pou e rua i nga tauranga tirohanga katoa.

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

Te takai

Ka takai aunoa nga mea matiti ki te rarangi e whai ake nei ina kore he waahi whakapae. Kia mahara ka gappa ana ki nga mokowhiti whakapae me te poutū i waenga i nga mea matiti.

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

Ka timata

Ko te whainga o nga karaehe Timata ki te whakakapi i nga karaehe whakatiki o te matiti taunoa, engari kaore i te rite katoa. Ka hangaia e CSS Grid he tauira matiti na roto i nga momo e kii ana ki nga kaitirotiro kia "tiimata i tenei pou" me te "mutu ki tenei pou." Ko aua taonga he grid-column-startme grid-column-end. Ko nga karaehe timata he tohu poto mo te mea o mua. Whakakotahitia ki nga karaehe pou kia rite ki te rahi me te whakahāngai i ō tīwae ahakoa e hiahia ana koe. Ka timata nga karaehe i 1te 0mea he uara muhu mo enei taonga.

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

Aunoa tīwae

Mena karekau he karaehe i runga i nga taonga matiti (ko nga tamariki tonu a te .grid), ka rahi aunoa ia mea matiti ki te pou kotahi.

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

Ka taea te whakakotahi i tenei whanonga ki nga karaehe pourangi matiti.

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

Kohanga

He rite ki ta maatau punaha matiti taunoa, ka taea e to maatau CSS Grid te ngawari ki te kohanga .grids. Engari, he rereke ki te taunoa, ka riro i tenei matiti nga huringa i roto i nga rarangi, pou, me nga waahi. Whakaarohia te tauira i raro nei:

• Ka takahia e matou te tau taunoa o nga pou me te taurangi CSS paetata: --bs-columns: 3.
• I te tīwae-aunoa tuatahi, ka tuku iho te kaute tīwae, ā, ko ia tīwae he kotahi hautoru o te whānui e wātea ana.
• I te tīwae-aunoa tuarua, kua tautuhia anō e mātou te kaute tīwae i runga i te kohanga .gridki te 12 (ta mātou taunoa).
• Ko te tuatoru-aunoa kaore he ihirangi kohanga.

I roto i nga mahi ka taea e tenei te maha ake o nga whakatakotoranga uaua me te ritenga ina whakaritea ki ta maatau punaha matiti taunoa.

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

Whakaritea

Whakaritehia te maha o nga pou, te maha o nga rarangi, me te whanui o nga waahi me nga taurangi CSS rohe.

Ko enei taurangi CSS kaore he uara taunoa; engari, ka whakamahia e ratou nga uara whakamuri ka whakamahia kia tukuna mai he tauira o te rohe. Hei tauira, ka whakamahia var(--bs-rows, 1)e matou mo o matou rarangi CSS Grid, ka warewarehia --bs-rowsna te mea kaore ano kia tautuhia ki hea. Ka mutu, .gridka whakamahia e te tauira taua uara hei utu mo te uara takahuri o 1.

Karekau he karaehe matiti

Ko nga huānga o nga tamariki tonu .gridhe matiti, no reira ka rahi te rahi me te kore e tino taapiri i te .g-colkaraehe.

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

Nga pou me nga waahi

Whakaritehia te maha o nga pou me te waahi.

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

Te taapiri rarangi

Te taapiri atu i nga rarangi me te huri i te tuunga o nga pou:

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

Aputa

Hurihia nga aputa poutū ma te whakarereke i te row-gap. Kia mahara ka whakamahia e matou i gaprunga i .gridte s, engari row-gapka column-gaptaea te whakarereke ina hiahiatia.

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

Na tera, ka taea e koe te rereke rereke me nga gaps whakapae, ka taea te tango i te uara kotahi (taha katoa) he uara takirua ranei (poutū me te whakapae). Ka taea te whakamahi me te momo raina-roto mo gap, me ta maatau --bs-gaptaurangi CSS ranei.

<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

Ko tetahi herenga o te Matiti CSS ko o tatou karaehe taunoa kei te hangaia tonu e nga taurangi Sass e rua, $grid-columnsme te $grid-gutter-width. Ma tenei ka whakatau i te maha o nga karaehe i hangaia i roto i a maatau CSS kua whakahiato. E rua nga whiringa i konei:

• Whakarerekehia aua taurangi Sass taunoa ka whakahiato ano i to CSS.
• Whakamahia nga momo taarai, ritenga ranei hei whakanui ake i nga karaehe kua whakaratohia.

Hei tauira, ka taea e koe te whakanui ake i te tatau o te pou me te huri i te rahi o te aputa, katahi ka rahihia o "tīwae" me te whakakotahitanga o nga momo raarangi me nga karaehe rarangi Matiti CSS kua tautuhia-mua (hei tauira, .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>