Giriidii CSS

Sirni giiridii durtii Bootstrap fiixee tooftaalee haala CSS waggoota kurnan oliif, namoota miliyoonaan lakkaa'amaniin yaalamanii fi qorataman bakka bu'a. Garuu, akkasumas amaloota fi tooftaalee CSS ammayyaa hedduu kanneen akka CSS Grid haaraa browser keessatti argaa jirru malee uumame.

Akkaataa itti hojjetu

Bootstrap 5 waliin, sirna giiridii adda ta'e kan CSS Grid irratti ijaarame, garuu Bootstrap twist waliin dandeessisuuf filannoo daballeerra. Ammas dareewwan haala deebii kennuu danda'an ijaaruuf fedhiidhaan iyyachuu dandeessu argatta, garuu mala adda ta'een hood jalatti.

• CSS Grid filannoo-in ta'uu isaati. Sirna tarjaa durtii saaguudhaan hanqisi $enable-grid-classes: falsefi saaguudhaan Tarree CSS dandeessisi $enable-cssgrid: true. Sana booda, Sass kee irra deebi'ii qindeessii.

• Fakkeenyota kan .rowwaliin bakka buusi .grid. Gitni a kan ati HTML keetiin irratti ijaartu .gridsaaga display: gridfi uuma .grid-template

• .col-*Kutaawwan kutaawwaniin bakka buusi .g-col-*. Sababni isaas tarjaawwan keenya CSS Grid grid-columnbakka width.

• Tarjaawwanii fi hammangaawwan gutter karaa jijjiiramoota CSS qindaa'u. Kanneen warra irratti saagi .gridfi akka barbaaddetti dhuunfachiisi, sarara keessaa ykn waraqaa akkaataa keessatti, --bs-columnsfi waliin --bs-gap.

Gara fuulduraatti, Bootstrap gara furmaata walmakaatti ce'uun isaa hin oolu sababiin isaas gapqabeenyi kun deeggarsa biraawzari guutuutti dhihaatu flexbox'f argateera.

Garaagarummaa ijoo

Sirna giiridii durtii wajjin wal bira qabamee yoo ilaalamu:

• Faayidaaleen Flex tarjaawwan CSS Grid haala walfakkaatuun dhiibbaa hin qaban.

• Qaawwaan gutter bakka buusa. Qabeentiin sirna tarjaa durtii keenya irraa gaphorizontal bakka buusa fi caalaatti akka .paddingmargin

• Akka kanaan, s irraa adda ta'ee .row, .grids margina negaatiivii hin qaban fi faayidaan margina gutters giiridii jijjiiruuf fayyadamuun hin danda'amu. Qaawwi tarjaa durtiidhaan qajeelaa fi dhaabbataadhaan hojiirra oola. Bal'ina isaaf kutaa dhuunfachuu ilaali .

• Akkaataawwan sarara keessaa fi amala akka bakka bu'oota gita fooyyessaatti ilaalamuu qabu (fkn, style="--bs-columns: 3;"vs class="row-cols-3").

• Man'een haala walfakkaatuun hojjeta, garuu lakkoofsa tarjaa kee tokkoon tokkoo fakkeenya man'ee irratti deebisanii saaguu si gaafachuu danda'a .grid. Bal'ina isaaf kutaa man'ee ilaali .

Fakkeenyaaf

Tarree sadii

Tarjaawwan bal'ina walqixaa sadii bal'ina ilaalchaa fi meeshaalee hunda irratti .g-col-4gitaalee fayyadamuun uumuun ni danda'ama. Haalata hammangaa buufata ilaalchaatiin jijjiiruuf gita deebii kennu dabali .

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

Deebii kan kennu

Haalata kee buufatawwan ilaalchaa hunda irratti sirreessuuf gita deebii kennu fayyadami. Asitti tarjaa lamaa tarjaawwan ilaalchaa dhiphoo ta'an irratti jalqabna, achiis gara tarjaa sadiitti tarjaawwan ilaalchaa giddu galeessaa fi isaa ol irratti guddifna.

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

Sana qindaa'ina tarjaa lamaan kanaa iddoowwan ilaalchaa hunda irratti wal bira qabi ilaali.

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

Marfachuu

Wantoonni tarjaa ofumaan gara sarara itti aanutti yeroo bakki dabalataa qajeelaan hin jirretti marfamu. Hubadhu, gapqaawwa qajeelaa fi dhaabbataa wanta tarjaa gidduu jiru irratti hojjeta.

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

Jalqaba

Gitoota jalqabaa gitoota ofseeti tarjaa durtii keenyaa bakka buusuuf kaayyeffatan, garuu guutummaatti tokko miti. CSS Grid unkaa tarjaa karaa akkaataalee kanneen biraawzaroota “tarjaa kana irraa jalqabi” fi “tarjaa kana irratti xumuraa” jedhanii itti himan uuma. Qabeenyi sun grid-column-startfi grid-column-end. Kutaawwan jalqabaa kan duraatiif gabaabduudha. Isaan gita tarjaa waliin wal-qabsiisi akka hamma barbaaddetti tarjaawwan kee qindeessii. Gitoota jalqabaa 1akka 0gatii sirrii hin taane qabeentota kanaaf jalqaba.

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

Tarreewwan ofumaan

Yeroo wanta tarjaa irratti gitoonni hin jirre (ijoollee battalaa a .grid), tokkoon tokkoon wanta tarjaa ofumaan gara tarjaa tokkootti safarama.

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

Amalli kun gita tarjaa tarjaa waliin makamuu danda'a.

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

Koonyaa gochuu

Sirna giiridii durtii keenyaa wajjin wal fakkaata, Giriidiin CSS keenya salphaatti man'ee .grids ni hayyama. Haa ta'u malee, akka durtii irraa adda ta'ee, tarjaan kun jijjiirama tarreewwan, tarjaawwanii fi qaawwaa keessatti dhaalu. Mee fakkeenya armaan gadii ilaali:

• Lakkoofsa tarjaa durtii jijjiiramaa CSS naannootiin irra darbina: --bs-columns: 3.
• Tarjaa ofumaan jalqabaa keessatti, lakkoofsi tarjaa dhaalamu fi tokkoon tokkoon tarjaa bal'ina jiru keessaa harka sadii keessaa tokko.
• Tarree ofumaan lammaffaa keessatti, lakkoofsa tarjaa kan nested irratti .gridgara 12tti deebisneerra (durtii keenya).
• Tarjaan ofumaan sadaffaan qabiyyee man'ee hin qabu.

Qabatamaan kun sirna tarjaa durtii keenyaa wajjin wal bira qabamee yoo ilaalamu qindaa'inoota walxaxaa fi amala ta'an ni hayyama.

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

Dhuunfachiisuu

Lakkoofsa tarjaa, lakkoofsa tarreewwanii, fi bal'ina qaawwa jijjiiramoota CSS naannoo waliin dhuunfachiisi.

Jijjiiramoonni CSS kun gatii durtii hin qaban; inumaayyuu, gatiiwwan duubatti deebi'uu kanneen hanga fakkeenyi naannoo kennamutti fayyadaman hojiirra oolchu. Fakkeenyaaf, var(--bs-rows, 1)tarreewwan CSS Grid keenyaaf fayyadamna, kunis tuffata --bs-rowssababiin isaas sun ammallee bakka kamittiyyuu hin saagamne. Erga ta'ee booda, .gridfakkeenyi gatii sana bakka gatii duubatti deebi'uu 1.

Gitoota giiridii hin qabu

Ijoollee battalaa elementoota kan wanta tarjaa dha, kanaafuu ifatti gita .gridosoo hin dabaliin safaramu ..g-col

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

Tarreewwanii fi qaawwa

Lakkoofsa tarjaa fi qaawwa sirreessii.

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

Tarreewwan dabaluu

Tarreewwan dabalataa dabaluu fi iddoo tarjaa jijjiiruu:

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

Qaawwa

Qaawwa dhaabbataa fooyyessuu qofaan jijjiiri row-gap. Hubadhu s gapirratti akka fayyadamnu .grid, garuu row-gapfi column-gapakka barbaachisummaa isaatti fooyya'uu danda'a.

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

Sababa sanaan, s dhaabbataa fi qajeelaa adda addaa qabaachuu dandeessa, isaanis gapgatii tokko (gara hunda) ykn gatiiwwan lama (dhaabbataa fi qajeelaa) fudhachuu danda'a. gapKunis akkaataa sarara keessaa , ykn --bs-gapjijjiiramaa CSS keenyaa wajjin hojii irra oolchuun ni danda'ama .

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

Daangeffamni tokko Giriidi CSS gitoonni keenya durtii ammallee jijjiiramoota Sass lamaatiin uumamuu isaaniiti, $grid-columnsfi $grid-gutter-width. Kunis baay'ina gitaa CSS keenya qindaa'e keessatti uumaman bu'a qabeessa ta'een dursee murteessa. Asitti filannoo lama qabda:

• Jijjiiramoota Sass durtii sana fooyyessii fi CSS kee irra deebi'ii qindeessii.
• Gitoota kennaman guddisuuf akkaataa sarara keessaa ykn amala fayyadami.

Fakkeenyaaf, lakkoofsa tarjaa guddisuu fi hammangaa qaawwa jijjiiruu dandeessa, sana booda “tarjaawwan” kee walmakaa akkaataa sarara keessaa fi gita tarjaa CSS Grid durtii ibsame (fkn, .g-col-4) safaruu dandeessa.

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