in English

Giriidii CSS

Akkaataa sirna qindaa'ina filannoo keenyaa kan CSS Grid irratti ijaarame fakkeenyotaa fi ciccitaa koodii waliin dandeessisi, itti fayyadamtu, fi dhuunfachiiftu baradhu.

Fuula kana irratti

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

Mataa ol—sirna CSS Grid keenya yaalii fi filannoo v5.1.0 irraa eegalee! Siif agarsiisuuf CSS galmee keenyaa keessatti hammanneerra, garuu durtiidhan hanqifamee jira. Akkaataa pirojektoota kee keessatti dandeessisitu baruuf dubbisuu kee itti fufi.

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 .

.g-kol-4 jedhamuun beekama

html

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

Deebii kan kennu

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

.g-kol-6 .g-kol-md-4

html

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

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

.g-kol-6 jedhamuun beekama

html

<div class="grid text-center">
  <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.

.g-kol-6 jedhamuun beekama

html

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

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.

.g-kol-3 .g-jalqaba-2

.g-kol-4 .g-jalqaba-6

html

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

Tarreewwan ofumaan

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

1. 1.

html

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

Amalli kun gita tarjaa tarjaa waliin makamuu danda'a.

.g-kol-6 jedhamuun beekama

1. 1.

html

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

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 qaawwa keessatti dhaalu. Mee fakkeenya armaan gadii ilaali:

Lakkoofsa tarjaa durtii jijjiiramaa CSS naannootiin irra darbina: --bs-columns: 3.
Tarree ofumaan jalqabaa keessatti, lakkoofsi tarjaa ni dhaala 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.

Tarree ofumaan jalqabaa

Ofumaan tarree

Tarree ofumaan lammaffaa

6 kan 12

4 keessaa 12

2 kan 12

Sadaffaa ofumaan tarree

html

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

Dhuunfachiisuu

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

Jijjiiramaa	Gatii duubatti deebi'uu	Ibsa
`--bs-rows`	`1`	Lakkoofsa tarreewwan unkaa tarjaa kee keessaa
`--bs-columns`	`12`	Lakkoofsa tarjaa unkaa tarjaa kee keessaa
`--bs-gap`	`1.5rem`	Guddina qaawwa tarjaawwan gidduu jiru (dhaabbataa fi qajeelaa) .

Jijjiiramoonni CSS kun gatii durtii hin qaban; kanaa mannaa, 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

Ofumaan tarree

html

<div class="grid text-center" 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.

.g-kol-2 jedhamuun beekama

html

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

.g-kol-6 jedhamuun beekama

.g-kol-4 jedhamuun beekama

html

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

Tarreewwan dabaluu

Tarreewwan dabalataa dabaluu fi iddoo tarjaa jijjiiruu:

Ofumaan tarree

html

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

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.

.g-kol-6 jedhamuun beekama

html

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

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 wajjin , ykn --bs-gapjijjiiramaa CSS keenyaa wajjin hojii irra oolchuun ni danda'ama .

.g-kol-6 jedhamuun beekama

html

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

14 tarreewwan

.g-kol-4 jedhamuun beekama

html

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