Urubuga rwa CSS

Sisitemu ya Bootstrap isanzwe ya sisitemu yerekana indunduro yimyaka icumi yubuhanga bwa CSS, bwageragejwe kandi bugeragezwa na miriyoni yabantu. Ariko, yarakozwe kandi idafite byinshi mubintu bigezweho bya CSS nubuhanga tubona muri mushakisha nka Grid nshya ya CSS.

Uburyo ikora

Hamwe na Bootstrap 5, twongeyeho uburyo bwo gukora sisitemu itandukanye ya gride yubatswe kuri CSS Grid, ariko hamwe na Bootstrap twist. Uracyabona amasomo ushobora gusaba kubushake kugirango wubake imiterere, ariko hamwe nuburyo butandukanye munsi ya hood.

• CSS Grid irahitamo. Hagarika sisitemu isanzwe ya gride mugushiraho $enable-grid-classes: falsekandi ushoboze CSS Grid mugushiraho $enable-cssgrid: true. Noneho, ongera usubiremo Sass yawe.

• Simbuza ingero za .rowhamwe .grid. Urwego .gridrushyiraho display: gridkandi rukora a grid-templatewubaka kuri HTML yawe.

• Simbuza .col-*amasomo .g-col-*n'amasomo. Ni ukubera ko CSS Grid inkingi zacu zikoresha grid-columnumutungo aho width.

• Inkingi nubunini bwashizweho binyuze muri CSS ihinduka. Shyira ibi kubabyeyi .gridhanyuma uhindure uko ubishaka, umurongo cyangwa mumpapuro, hamwe --bs-columnsna --bs-gap.

Mugihe kizaza, Bootstrap irashobora kwimukira mubisubizo bivanze kuko gapumutungo umaze kugera hafi ya mushakisha yuzuye kuri flexbox.

Itandukaniro ryingenzi

Ugereranije na sisitemu isanzwe ya grid:

• Ibikoresho byoroshye ntabwo bigira ingaruka kuri CSS Grid inkingi muburyo bumwe.

• Ibyuho bisimbuza imyanda. Umutungo gapusimbuza horizontal paddingkuva sisitemu idasanzwe ya gride na sisitemu nibindi bisa margin.

• Nka, bitandukanye .rowna s, .grids nta marge mbi kandi nibikorwa byingirakamaro ntibishobora gukoreshwa muguhindura imiyoboro. Icyuho cya gride gikoreshwa muburyo butambitse kandi buhagaritse. Reba igice cyihariye kugirango ubone ibisobanuro birambuye.

• Imirongo nuburyo bwihariye bigomba kurebwa nkabasimbuye ibyiciro byo guhindura (urugero, style="--bs-columns: 3;"vs class="row-cols-3").

• Icyari gikora kimwe, ariko birashobora kugusaba gusubiramo inkingi zibara kuri buri rugero rwicyari .grid. Reba igice cyo guturamo kugirango ubone ibisobanuro birambuye.

Ingero

Inkingi eshatu

Inshuro eshatu zingana-ubugari bwinkingi zose zerekanwa nibikoresho birashobora gushirwaho ukoresheje .g-col-4amasomo. Ongeraho ibyiciro byitabira kugirango uhindure imiterere ukurikije ingano yo kureba.

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

Igisubizo

Koresha ibyiciro byitondewe kugirango uhindure imiterere yawe kubireba. Hano dutangirana ninkingi ebyiri kumurongo muto ugaragara, hanyuma tugakura kugeza kumurongo itatu kumurongo wo hagati no hejuru.

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

Gereranya ibyo kuriyi miterere ibiri yinkingi kuri byose bireba.

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

Gupfunyika

Ibikoresho bya gride bihita bipfunyika kumurongo ukurikira mugihe ntakindi cyumba gitambitse. Menya ko gapikoreshwa kuri horizontal na vertical icyuho hagati ya grid ibintu.

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

Itangira

Gutangira amasomo bigamije gusimbuza gride ya offset ya offset, ariko ntabwo arimwe rwose. CSS Grid ikora gride yicyitegererezo ikoresheje uburyo bwabwira mushakisha "gutangira kuriyi nkingi" na "kurangirira kuriyi nkingi." Iyo mitungo ni grid-column-startna grid-column-end. Gutangira amasomo ni ngufi kubwa mbere. Mubihuze hamwe ninkingi ibyiciro kugirango ubunini kandi uhuze inkingi zawe uko ukeneye. Gutangira amasomo atangira 1nkuko 0nigiciro kitemewe kuriyi mico.

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

Inkingi yimodoka

Iyo nta byiciro biri kuri gride yibintu (abana bahita ba a .grid), buri gride ikintu kizahita kingana kumurongo umwe.

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

Iyi myitwarire irashobora kuvangwa na grid inkingi ibyiciro.

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

Icyari

Bisa na sisitemu ya sisitemu isanzwe, CSS Grid yacu itanga ibyari byoroshye byo .grids. Ariko, bitandukanye nibisanzwe, iyi gride iragwa impinduka mumirongo, inkingi, nu cyuho. Suzuma urugero rukurikira:

• Turengereye umubare usanzwe winkingi hamwe na CSS ihinduka : --bs-columns: 3.
• Muri auto-inkingi yambere, inkingi ibara yarazwe kandi buri nkingi ni kimwe cya gatatu cyubugari buboneka.
• Mugihe cya kabiri auto-inkingi, twongeye gusubiramo inkingi kubara kuri nest .gridkuri 12 (isanzwe).
• Igice cya gatatu cyimodoka-inkingi ntigizwe nibirimo.

Mubimenyerezo ibi bituma habaho ibintu byinshi bigoye kandi byihariye mugihe ugereranije na sisitemu ya gride isanzwe.

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

Guhitamo

Hindura umubare winkingi, umubare wumurongo, nubugari bwibyuho hamwe na CSS ihinduka.

Izi mpinduka za CSS nta gaciro gasanzwe zifite; Ahubwo, bashira mubikorwa agaciro gakoreshwa kugeza igihe urwego rwibanze rutanzwe. Kurugero, dukoresha var(--bs-rows, 1)umurongo wa CSS Grid umurongo, wirengagiza --bs-rowskuko ibyo bitarashyirwaho ahandi. Nibimara kuba, .gridurugero ruzakoresha ako gaciro aho gusubira inyuma kwa 1.

Nta byiciro bya gride

Ako kanya abana ibintu bigize .gridgrid grid, kuburyo bizaba binini nta wongeyeho .g-colishuri.

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

Inkingi n'ibyuho

Hindura umubare winkingi nu cyuho.

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

Ongeraho umurongo

Ongeraho imirongo myinshi no guhindura ishyirwa ryinkingi:

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

Ibyuho

Hindura icyuho gihagaritse gusa uhindura i row-gap. Menya ko dukoresha gapkuri .grids, ariko row-gapkandi column-gapbirashobora guhinduka nkuko bikenewe.

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

Kubera iyo mpamvu, urashobora kugira vertical na horizontal gaps zitandukanye, zishobora gufata agaciro kamwe (impande zose) cyangwa indangagaciro (vertical na horizontal). Ibi birashobora gukoreshwa hamwe nuburyo bwa inline ya gap, cyangwa hamwe na --bs-gapCSS ihinduka.

<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

Imbogamizi imwe ya CSS ya Gride ni uko ibyiciro byacu byambere bitangwa na Sass ebyiri zihinduka, $grid-columnskandi $grid-gutter-width. Ibi byerekana neza umubare wibyiciro byatanzwe muri CSS yacu. Ufite amahitamo abiri hano:

• Hindura ibyo Sass isanzwe ihinduka hanyuma usubiremo CSS yawe.
• Koresha umurongo cyangwa imiterere yihariye kugirango wongere amasomo yatanzwe.

Kurugero, urashobora kongera inkingi kubara hanyuma ugahindura ingano yubunini, hanyuma ugahindura “inkingi” yawe hamwe nuruvange rwimiterere yimiterere hamwe na CSS Grid ibyiciro byateganijwe (urugero, .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>