CSS Grid (CSS) ye

Bootstrap ka grid system default bɛ CSS labɛncogo fɛɛrɛw kuncɛlen jira san tan ni kɔ kɔnɔ, minnu kɛra k’a lajɛ ani k’u kɔrɔbɔ mɔgɔ miliyɔn caman fɛ. Nka, a fana Dabɔra ni bi CSS-minɛnw ni fɛɛrɛ caman tɛ minnu na an bɛ minnu Ye navigatɔrɔw la i n’a fɔ CSS Grid kura.

A bɛ baara kɛ cogo min na

Ni Bootstrap 5 ye, an ye sugandi dɔ Fàra o kan walasa ka grid system danfaralen dɔ Kɛ min jɔlen bɛ CSS Grid kan, nka ni Bootstrap twist ye. I bɛ kalanw sɔrɔ hali bi i bɛ se ka minnu ɲini ni ŋaniya ye walasa ka jaabiw labɛncogo jɔ, nka ni fɛɛrɛ wɛrɛ ye hood jukɔrɔ.

• CSS Grid ye opt-in ye. grid system default bali ni sigili ye $enable-grid-classes: falseani ka CSS Grid baara ni sigili $enable-cssgrid: trueye . O kɔ, i ka Sass lajɛ kokura.

• Aw bɛ misaliw bila u nɔ na .rowni .grid. Kalanso bɛ a .gridsigi display: gridani k’a Dabɔ grid-templatei bɛ min jɔ ni i ka HTML ye.

• .col-*Kalansow bila kalansow nɔ .g-col-*na. O bɛ kɛ bawo an ka CSS Grid kuluw bɛ baara kɛ ni grid-columnnafolo ye width.

• Kolonw ni gutter hakɛw bɛ sigi CSS fɛn caman sɛgɛsɛgɛli fɛ. Aw bɛ ninnu sigi bangebaga kan .gridani ka aw sago kɛ cogo o cogo, inline walima stylesheet kɔnɔ, ni --bs-columnsani --bs-gap.

Don nataw la, a ka c’a la, Bootstrap bɛna wuli ka taa furakɛlicogo ɲɔgɔnna na bawo o gapnafolo in ye navigatɔrɔ dɛmɛ dafalen sɔrɔ ka surunya flexbox la.

Danfara jɔnjɔn minnu bɛ u ni ɲɔgɔn cɛ

Ni an ye a suma ni grid system default ye:

• Flex nafalanw tɛ nɔ bila CSS Grid kuluw la o cogo kelen na.

• Gaps bɛ gutterw bila u nɔ na. Nafolo gapbɛ horizontal nɔnabila ka paddingbɔ an ka default grid system la ani ka baara kɛ ka caya i n' a fɔ margin.

• O cogo la, a tɛ i n’a fɔ .rows, .grids tɛ ni margin jugu ye ani margin utilities tɛ se ka kɛ ka grid gutters caman Changer. Grid gaps bɛ baara kɛ ni horizontal ani vertical ye ka kɛɲɛ ni default ye. Aw ye yɔrɔ lajɛ min tɔgɔ ye ko customizing walasa ka kunnafoni wɛrɛw sɔrɔ.

• Inline ani custom styles ka kan ka jate i n’a fɔ modifier classes (misali la, style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting bɛ baara kɛ o cogo kelen na, nka a bɛ se k’a ɲini i fɛ i ka i ka kulu jatebɔw lasegin nested instance kelen-kelen bɛɛ kan .grid. Aw ye yɔrɔ lajɛ min tɔgɔ ye ko nesting walasa ka kunnafoni wɛrɛw sɔrɔ.

Misaliw

Kolon saba

Kolon saba minnu bonya bɛ bɛn ɲɔgɔn ma filɛlikɛyɔrɔw ni minɛnw bɛɛ kɔnɔ, olu bɛ se ka dabɔ ni baara kɛli ye ni .g-col-4kalasiw ye. Kalanso minnu bɛ jaabi di, olu fara a kan walasa ka labɛncogo Changer ka kɛɲɛ ni viewport hakɛ ye.

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

Jaabiw

Baara kɛ ni jaabi kalanw ye walasa k’i ka labɛncogo ladilan filɛliyɔrɔw bɛɛ kɔnɔ. Yan an bɛ daminɛ ni kulu fila ye filɛli-yɔrɔ fitininw kan, ka sɔrɔ ka bonya ka se kulu saba ma filɛli-yɔrɔ cɛmancɛw kan ani sanfɛ.

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

Aw bɛ o suma ni nin kulu fila labɛncogo ye filɛlikɛyɔrɔw bɛɛ la.

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

Fɛn min bɛ kɛ ka fɛnw siri

Grid fɛnw bɛ u yɛrɛ siri ka taa layini nata la ni yɔrɔ tɛ yen tugun tilennen na. A kɔlɔsi ko the gapbɛ tali kɛ yɔrɔw la minnu bɛ jatebɔlanw ni ɲɔgɔn cɛ.

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

A bɛ daminɛ

Daminɛ kalanw laɲini ye ka an ka default grid ka offset kalanw bila u nɔ na, ​​nka u tɛ kelen ye pewu. CSS Grid bɛ jatebɔlan dɔ Dabɔ cogoyaw fɛ minnu b’a Fɔ navigatɛriw ye ko u ka “daminɛ nin kulu in na” ani “ka ban nin kulu in na.” O nafolo ninnu ye grid-column-startani grid-column-end. Daminɛ kalanw ye sɛbɛnfura surun ye fɔlɔw la. Aw bɛ u fara ɲɔgɔn kan ni kuluw ka kalanw ye walasa ka aw ka kuluw bonya ani ka u labɛn cogo o cogo aw mago bɛ u la. Daminɛ kalanw bɛ daminɛ 1i n’a fɔ 0nafa min tɛ tiɲɛ ye nin nafolo ninnu na.

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

Auto kolonw

Ni kalanw tɛ jatebɔfɛnw kan (a denw teliya la .grid), jatebɔfɛn kelen-kelen bɛɛ bɛna bonya a yɛrɛma ka kɛ kulu kelen ye.

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

O kɛcogo bɛ se ka ɲagami ni grid column classes ye.

<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 (kɔnɔnafili).

I n’a fɔ an ka grid system default, an ka CSS Grid bɛ sira Di s ka nesting nɔgɔya ma .grid. Nka, a tɛ i n’a fɔ a daminɛcogo, o ja in bɛ fɛn caman ciyɛn ta jirisunw, kuluw ani yɔrɔw la. An ka misali lajɛ min bɛ duguma:

• An bɛ kuluw hakɛ dafalen wuli ni sigida CSS fɛnsɛbɛnni ye: --bs-columns: 3.
• Oto-kolon fɔlɔ la, kulu jate bɛ ciyɛn ta ani kulu kelen-kelen bɛɛ ye bonya sɔrɔlen tila sabanan ye.
• Oto-kolon filanan na, an ye kulu jatebla Lasegin nested .gridkan ka Kɛ 12 ye (an ka default).
• Oto-kolon sabanan tɛ ni kɔnɔkow ye minnu bɛ sigi sen kan.

Tiɲɛ na o bɛ sira Di labɛnw ma minnu ka gɛlɛn kosɛbɛ ani minnu bɛ Kɛ ka kɛɲɛ ni mɔgɔw sago ye n’i y’a Jira ko an ka grid system (jatebɔ) kɛcogo kɔrɔ ye.

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

Ka kɛɲɛ ni mɔgɔw sago ye

Aw bɛ kuluw hakɛ, jirisunw hakɛ, ani yɔrɔw bonya ladilan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye.

O CSS bεε bε bεn ni bεnkansεbεn ye; o nɔ na, ​​u bɛ fallback nafaw waleya minnu bɛ kɛ fo sigida misali dɔ ka di. Misali la, an bɛ baara Kɛ ni var(--bs-rows, 1)an ka CSS Grid rows ye, o min bɛ jatebla --bs-rowsKɛ bawo o ma Sìgi yɔrɔ si fɔlɔ. Ni a kɛra, .gridmisali bɛna baara kɛ n’o nafa ye sanni a ka kɛ 1.

Grid kalanw tɛ yen

Immediate children elements of .gridye grid fɛnw ye, o la u bɛna bonya k'a sɔrɔ u ma .g-colkalansen dɔ fara a kan k'a jɛya.

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

Kolonw ni cɛncɛnw

Aw bɛ kolosinsinnanw hakɛ ni u cɛtigɛcogo ladilan.

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

Layiw farali ɲɔgɔn kan

Layidu wɛrɛw farali ani kuluw sigiyɔrɔ caman cili:

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

Gapw (yɔrɔw).

Yɛlɛma bɛ yɔrɔ jɔlenw na dɔrɔn ni row-gap. A kɔlɔsi ko an bɛ baara Kɛ ni gaps kan .grid, nka row-gapani a column-gapbɛ Se ka Lakodɔn i n’a fɔ a mago bɛ cogo min na.

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

O de kosɔn, i bɛ se ka s jɔlenw ni gaps jɔlenw sɔrɔ minnu tɛ kelen ye, minnu bɛ se ka nafa kelen ta (fɛrɛ bɛɛ) walima nafa fila (jɔlen ni jɔlen). O bɛ se ka waleya ni inline style ye for gap, walima ni an ka --bs-gapCSS variable ye.

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

CSS Grid danyɔrɔ dɔ ye ko an ka kalasi dafalenw bɛ sɔrɔ hali bi Sass fɛnsɛbɛnni fila fɛ, $grid-columnsani $grid-gutter-width. O bɛ kalan hakɛ dantigɛ ka kɔn an ka CSS lajɛlen kɔnɔ. Sugandili fila bɛ aw bolo yan:

• O Sass bεε bεε bεε bε Se ka Yεlεma ani ka i ka CSS labɛn kokura.
• Baara kɛ ni inline walima custom styles ye walasa ka dɔ fara kalanw kan minnu dira.

Misali la, i bɛ se ka dɔ fara kuluw jate kan ani ka danfara hakɛ Changer, ka sɔrɔ ka i ka “kolonw” bonya ni inline styles ni CSS Grid column classes (misali la, .g-col-4) ɲagaminen ye.

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