Grid ea CSS

Sistimi ea grid ea kamehla ea Bootstrap e emela pheletso ea lilemo tse fetang leshome tsa mekhoa ea sebopeho sa CSS, e lekiloeng le ho lekoa ke limilione tsa batho. Empa, e boetse e entsoe ntle le likarolo tse ngata tsa sejoale-joale tsa CSS le mekhoa eo re e bonang ho libatli tse kang CSS Grid e ncha.

Kamoo e sebetsang kateng

Ka Bootstrap 5, re kentse khetho ea ho nolofalletsa sistimi e arohaneng ea grid e hahiloeng ho CSS Grid, empa ka Bootstrap twist. U ntse u fumana litlelase tseo u ka li sebelisang hang-hang ho haha ​​​​meralo e arabelang, empa ka mokhoa o fapaneng tlas'a hood.

• CSS Grid e khetha ho kena. Thibela gridi ea kamehla ka ho seta $enable-grid-classes: falsele ho nolofalletsa CSS Grid ka ho seta $enable-cssgrid: true. Ebe, kopanya Sass ea hau hape.

• Fetola mehlala .rowka .grid. Sehlopha .gridse beha display: gridle ho theha grid-templateseo u se hahang ka HTML ea hau.

• Fetola .col-*litlelase ka .g-col-*litlelase. Lebaka ke hobane litšiea tsa rona tsa CSS Grid li sebelisa grid-columnthepa sebakeng sa width.

• Likholomo le boholo ba li-gutter li behoa ka mefuta e fapaneng ea CSS. Beha tsena ho motsoali .grid'me u iketsetse mokhoa oo u batlang ka oona, ka har'a line kapa ka mokhoa oa ho ngola, ka --bs-columnsle --bs-gap.

Nakong e tlang, Bootstrap e tla fetohela ho tharollo ea lebasetere kaha gapthepa e fihletse ts'ehetso e felletseng ea sebatli bakeng sa flexbox.

Liphapang tse ka sehloohong

Ha ho bapisoa le sistimi ea grid ea kamehla:

• Lisebelisoa tsa Flex ha li ame likholomo tsa CSS Grid ka tsela e ts'oanang.

• Likheo li nkela li-gutter sebaka. Thepa gape nkela sebaka se otlolohileng paddingho tsoa ho sistimi ea rona ea kamehla mme e sebetsa joalo ka margin.

• Ka hona, ho fapana le .rows, .grids ha e na likhahla tse mpe le lisebelisoa tsa marang-rang li ke ke tsa sebelisoa ho fetola li-gutters tsa grid. Likheo tsa grid li sebelisoa ka mokhoa o otlolohileng le o otlolohileng ka mokhoa oa kamehla. Sheba karolo ea ho itlhophisa bakeng sa lintlha tse ling.

• Mefuta e ka har'a mela le e tloaelehileng e lokela ho nkoa e le e nkelang litlelase tsa ho fetola (mohlala, style="--bs-columns: 3;"khahlano class="row-cols-3"le ).

• Nesting e sebetsa ka mokhoa o ts'oanang, empa e kanna ea hloka hore o hlophise bocha lipalo tsa kholumo ea hau ketsahalong ka 'ngoe ea sehlaha sa .grid. Sheba karolo ea lihlaha ho fumana lintlha.

Mehlala

Litšiea tse tharo

Likholomo tse tharo tse bophara bo lekanang libakeng tsohle tsa pono le lisebelisoa li ka etsoa ka ho sebelisa .g-col-4lihlopha. Kenya litlelase tse arabelang ho fetola sebopeho ka boholo ba sebaka sa pono.

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

Ea arabelang

Sebelisa litlelase tsa batho ba arabelang ho fetola sebopeho sa hau ho libaka tsa ho shebella. Mona re qala ka litšiea tse peli libakeng tse tšesaane haholo tsa pono, ebe re hola ho fihla ho litšiea tse tharo ho lipono tse mahareng le holimo.

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

Bapisa seo le sebopeho sa likholomo tsena tse peli libakeng tsohle tsa pono.

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

Ho phuthela

Lintho tsa grid li iphuthela moleng o latelang ha ho se na sebaka se tšekaletseng. Hlokomela hore sena se gapsebetsa ho likheo tse tšekaletseng le tse theohileng lipakeng tsa lintho tsa grid.

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

E qala

Litlelase tsa ho qala li ikemiselitse ho khutlisa litlelase tsa rona tsa grid ea kamehla, empa ha li tšoane ka ho felletseng. CSS Grid e theha template ea grid ka mekhoa e bolellang libatli ho "qala kholomong ena" le "qetela kholeng ena." Thepa tseo ke grid-column-startle grid-column-end. Litlelase tsa ho qala ke shorthand bakeng sa ea pele. Li kopane le lihlopha tsa kholomo ho ea ka boholo 'me u tsamaise likholomo tsa hau kamoo u hlokang kateng. Lithuto tsa ho qala li qala 1joalo 0ka boleng bo sa sebetseng ba thepa ena.

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

Litšiea tsa likoloi

Ha ho se na litlelase linthong tsa marang-rang (bana ba hang-hang ba .grid), ntho e 'ngoe le e' ngoe ea grid e tla ikemela ho kholomo e le 'ngoe.

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

Boitšoaro bona bo ka kopanngoa le lihlopha tsa grid column.

<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

Joalo ka sistimi ea rona ea grid ea kamehla, Grid ea rona ea CSS e lumella hore ho be bonolo ho haha .grid​​​​s. Leha ho le joalo, ho fapana le ea kamehla, grid ena e rua liphetoho meleng, likholomo le likheo. Nahana ka mohlala o ka tlase:

• Re fetisa palo e sa lekanyetsoang ea litšiea ka mofuta oa CSS oa lehae: --bs-columns: 3.
• Kholomong ea pele e ikemetseng, palo ea kholomo e futsitsoe 'me kholomo ka 'ngoe ke karolo ea boraro ea bophara bo fumanehang.
• Kholomong ea bobeli ea auto, re seta bocha palo ea kholomo e behiloeng .gridho 12 (ea rona ea kamehla).
• Kholomo e iketsang ea boraro ha e na litaba tse hlahisitsoeng.

Ha e le hantle sena se lumella hore ho be le meralo e rarahaneng le e tloaelehileng ha e bapisoa le tsamaiso ea rona ea grid ea kamehla.

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

Iketsetse palo ea litšiea, palo ea mela, le bophara ba likheo ka mefuta e fapaneng ea CSS ea lehae.

Mefuta ena ea CSS ha e na boleng ba kamehla; ho e-na le hoo, ba sebelisa litekanyetso tsa morao-rao tse sebelisoang ho fihlela mohlala oa sebaka o fanoe. Ka mohlala, re sebelisa var(--bs-rows, 1)bakeng sa melato ea rona ea CSS Grid, e hlokomolohang --bs-rowshobane ha e so hlophisoe kae kapa kae. Ha e se e le teng, .gridmohlala o tla sebelisa boleng boo ho fapana le boleng ba fallback ba 1.

Ha ho lihlopha tsa marang-rang

Likarolo tsa hang-hang tsa bana .gridke lisebelisoa tsa grid, kahoo li tla ba boholo ntle le ho kenyelletsa .g-colsehlopha ka ho hlaka.

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

Litšiea le likheo

Fetola palo ea litšiea le lekhalo.

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

Ho eketsa mela e meng le ho fetola sebaka sa likholomo:

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

Likheo

Fetola likheo tse otlolohileng feela ka ho fetola row-gap. Hlokomela hore re sebelisa gapho .grids, empa row-gaple column-gapka fetoloa ha ho hlokahala.

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

Ka lebaka leo, o ka ba le li-s tse fapaneng tse otlolohileng le tse rapameng gap, tse ka nkang boleng bo le bong (mahlakore ohle) kapa para ea boleng (tse otlolohileng le tse rapameng). Sena se ka sebelisoa ka setaele sa inline bakeng sa gap, kapa ka mofuta oa rona oa --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

Moeli o mong oa CSS Grid ke hore litlelase tsa rona tsa kamehla li ntse li hlahisoa ke mefuta e 'meli ea Sass, $grid-columnsle $grid-gutter-width. Sena se rera esale pele palo ea lihlopha tse hlahisoang ho CSS ea rona e hlophisitsoeng. U na le likhetho tse peli mona:

• Fetola mefuta e sa fetoheng ea Sass 'me u boele u boele u bokelle CSS ea hau.
• Sebelisa mekhoa e ka hare kapa e tloaelehileng ho eketsa lihlopha tse fanoeng.

Mohlala, o ka eketsa palo ea litšiea le ho fetola boholo ba lekhalo, 'me u fane ka boholo ba "likholomo" tsa hau ka motsoako oa li-styles tse ka hare le lihlopha tse boletsoeng esale pele tsa CSS Grid (mohlala, .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>