Gridi ya CSS

Sisiteme ya giridi ya xiviri ya Bootstrap yi yimela nhlohlorhi ya ku tlula khume ra malembe ya tindlela to veka CSS, leti ringetiweke no kamberiwa hi timiliyoni ta vanhu. Kambe, yi tlhele yi endliwa handle ka swihlawulekisi swo tala swa manguva lawa swa CSS na tithekiniki leti hi ti vonaka eka swihlamusela-marito swo fana na Gridi leyintshwa ya CSS.

Ndlela leyi swi tirhaka ha yona

Hi Bootstrap 5, hi engeterile nhlawulo wo endla leswaku ku va na sisiteme ya gridi yo hambana leyi akiweke eka CSS Grid, kambe hi ku soholota ka Bootstrap. U ha kuma titlilasi leti u nga ti tirhisaka hi ku tiyimisela ku aka swivumbeko leswi hlamulaka, kambe hi ndlela yo hambana ehansi ka hood.

• CSS Grid i ku hlawula ku nghena. Tirhisa sisiteme ya gridi ya ntolovelo hi ku veka $enable-grid-classes: falsena ku pfumelela Gridi ya CSS hi ku veka $enable-cssgrid: true. Kutani, tlhela u hlengeleta Sass ya wena.

• Cinca swikombiso swa .rowhi .grid. Tlilasi .gridyi veka display: gridno tumbuluxa a grid-templateleyi u akaka eka yona hi HTML ya wena.

• Siva .col-*titlilasi hi .g-col-*titlilasi. Leswi swi vangiwa hikuva tikholomu ta hina ta CSS Grid ti tirhisa grid-columnnhundzu ematshan'wini ya width.

• Tikholomu na vukulu bya gutter swi vekiwa hi ku tirhisa swilo leswi cinca-cincaka swa CSS. Seta leswi eka mutswari .gridivi u lulamisa hilaha u lavaka hakona, endzeni ka layini kumbe eka xiphephana xa xitayili, hi --bs-columnsna --bs-gap.

Eka nkarhi lowu taka, Bootstrap yi nga ha cincela eka xitshunxo xa xihlanganisi tanihileswi gapnhundzu yi fikeleleke kwalomu ka nseketelo lowu heleleke wa xihlamusela-marito xa flexbox.

Ku hambana ka nkoka

Loko ku pimanisiwa na sisiteme ya gridi ya ntolovelo:

• Switirhisiwa swa Flex a swi khumbi tikholomu ta CSS Grid hi ndlela leyi fanaka.

• Ti gaps ti siva ti gutters. Nhundzu gapyi siva horizontal paddingku suka eka sisiteme ya hina ya gridi ya ntolovelo naswona yi tirha ku fana na margin.

• Hi ndlela yaleyo, ku hambana na .rows, .grids a yi na ti margin to biha naswona ti margin utilities a ti nge tirhisiwi ku cinca ti grid gutters. Swivandla swa gridi swi tirhisiwa hi ndlela ya horizontal na vertical hi ku tiyimisela. Vona xiyenge xa ​​ku endla hi ku landza swilaveko swa wena ku kuma vuxokoxoko byo tala.

• Switayili swa le ndzeni na swa ntolovelo swi fanele ku langutiwa tanihi leswi nga ta siva titlilasi ta vacinci (xikombiso, style="--bs-columns: 3;"vs class="row-cols-3").

• Ku endla swisaka swi tirha hi ndlela leyi fanaka, kambe swi nga ha lava leswaku u tlhela u veka tinhlayo ta wena ta kholomo eka xikombiso xin’wana ni xin’wana xa ku pfaleriwa .grid. Vona xiyenge xa ​​ku endla swisaka ku kuma vuxokoxoko.

Swikombiso

Tikholomu tinharhu

Tikholomu tinharhu ta ku anama loku ringanaka ku tsemakanya swivono hinkwaswo na switirhisiwa ti nga endliwa hi ku tirhisa .g-col-4titlilasi. Engetelani titlilasi leti hlamulaka ku cinca layout hi sayizi ya 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>

Ku hlamula

Tirhisa titlilasi leti hlamulaka ku lulamisa layout ya wena ku tsemakanya swivono. Laha hi sungula hi tikholomu timbirhi eka swivono leswitsongo swinene, ivi hi kula ku ya eka tikholomu tinharhu eka swivono swa le xikarhi na le henhla.

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

Pimanyisa sweswo na xivumbeko lexi xa tikholomu timbirhi eka swivono hinkwaswo.

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

Ku phutsela

Swilo swa gridi swi phutsela hi ku tisungulela eka layini leyi landzelaka loko ku nga ha ri na ndhawu hi ndlela yo olova. Xiya leswaku the yi gaptirha eka swivandla swa horizontal na vertical exikarhi ka swilo swa gridi.

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

Ku sungula

Titlilasi to sungula ti kongomisa ku siva titlilasi ta offset ta gridi ya hina ya ntolovelo, kambe a ti fani hi ku helela. CSS Grid yi endla xifaniso xa gridi hi ku tirhisa switayele leswi byelaka swihlamusela-marito leswaku swi “sungula eka kholomo leyi” ni ku “hela eka kholomo leyi.” Swilo sweswo i grid-column-startna grid-column-end. Titlilasi to sungula i marito yo koma ya leyo sungula. Va hlanganise na titlilasi ta tikholomu ku pima na ku ringanisa tikholomu ta wena hilaha u lavaka hakona. Titlilasi to sungula ti sungula eka 1tanihi leswi 0ku nga ntikelo lowu nga tirhiki wa swihlawulekisi leswi.

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

Tikholomu ta Auto

Loko ku nga ri na titlilasi eka swilo swa giridi (vana va le kusuhi va a .grid), nchumu wun’wana ni wun’wana wa giridi wu ta ringanisiwa hi ku tisungulela ku va kholomo yin’we.

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

Mahanyelo lawa ya nga hlanganisiwa na titlilasi ta kholomo ya gridi.

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

Ku endla swisaka

Ku fana na sisiteme ya hina ya gridi ya ntolovelo, Gridi ya hina ya CSS yi pfumelela ku olova ku endla swisaka swa .grids. Kambe, ku hambana ni ya ntolovelo, giridi leyi yi dya ndzhaka ya ku cinca eka tilayini, tikholomu ni swivandla. Xiya xikombiso lexi nga laha hansi:

• Hi tlula nhlayo ya xiviri ya tikholomu hi xihlawulekisi xa CSS xa laha kaya: --bs-columns: 3.
• Eka auto-column yo sungula, nhlayo ya tikholomu yi dya ndzhaka naswona kholomo yin’wana na yin’wana i n’we xa nharhu xa ku anama loku nga kona.
• Eka auto-column ya vumbirhi, hi tlherisele nhlayo ya tikholomu eka nested .grideka 12 (default ya hina).
• Kholomo ya vunharhu ya otomatiki a yi na nhundzu leyi pfanganisiweke.

Hi ku tirhisa leswi swi pfumelela swivumbeko leswi rharhanganeke swinene na swa ntolovelo loko swi pimanisiwa na sisiteme ya hina ya gridi ya ntolovelo.

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

Ku endla swilo hi ku landza swilaveko swa wena

Endla nhlayo ya tikholomu, nhlayo ya tilayini, na ku anama ka swivandla hi ku cinca-cinca ka CSS ya laha kaya.

Swilo leswi swa CSS leswi cinca-cincaka a swi na ntikelo wa xiviri; ematshan’wini ya sweswo, va tirhisa mimpimo ya fallback leyi tirhisiwaka ku kondza ku nyikiwa xikombiso xa laha kaya. Xikombiso, hi tirhisa var(--bs-rows, 1)eka tilayini ta hina ta CSS Grid, leti honisaka --bs-rowshikuva sweswo a swi si vekiwa kun’wana. Loko se swi ri tano, .gridxikombiso xi ta tirhisa ntikelo wolowo ematshan’weni ya ntikelo wa fallback wa 1.

Ku hava titlilasi ta gridi

Vana va xihatla swiaki swa .gridi swilo swa gridi, kutani va ta va va sayizi handle ko engetela .g-coltlilasi hi ku kongoma.

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

Tikholomu na swivandla

Lulamisa nhlayo ya tikholomu ni xivandla lexi nga kona.

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

Ku engetela tilayini

Ku engetela tilayini tin’wana ni ku cinca ku vekiwa ka tikholomu:

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

Swivandla swa swivandla

Cinca swivandla leswi yimisiweke ntsena hi ku cinca row-gap. Xiya leswaku hi tirhisa gapeka .grids, kambe row-gapnaswona column-gapyi nga cinciwa tanihilaha swi lavekaka hakona.

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

Hikwalaho ka sweswo, u nga va na s yo hambana ya vertical na horizontal gap, leyi nga tekaka ntikelo wun’we (matlhelo hinkwawo) kumbe pair ya mimpimo (vertical na horizontal). Leswi swi nga tirhisiwa hi xitayili xa le ndzeni ka layini xa gap, kumbe hi --bs-gapxihlawulekisi xa hina xa CSS.

<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

Xihinga xin’wana xa Gridi ya CSS hi leswaku titlilasi ta hina ta ntolovelo ta ha endliwa hi swilo swimbirhi leswi cinca-cincaka swa Sass, $grid-columnsna $grid-gutter-width. Leswi hi ndlela leyinene swi veka ka ha ri emahlweni nhlayo ya titlilasi leti endliweke eka CSS ya hina leyi hlengeletiweke. U na tindlela timbirhi leti u nga ti hlawulaka laha:

• Cinca swilo sweswo leswi cinca-cincaka swa Sass swa ntolovelo ivi u tlhela u hlengeleta CSS ya wena.
• Tirhisa switayele swa le ndzeni kumbe swa ntolovelo ku engetela titlilasi leti nyikiweke.

Xikombiso, u nga engetela nhlayo ya tikholomu no cinca mpimo wa xivandla, ivi u pima “tikholomu” ta wena hi ku hlangana ka switayele swa le ndzeni ka layini na titlilasi ta tikholomu ta CSS Grid leti hlamuseriweke ka ha ri emahlweni (xikombiso, .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>