CSS ƒe Nɔnɔmetata

Bootstrap ƒe grid ɖoɖo si woɖo ɖi la tsi tre ɖi na CSS ƒe ɖoɖowɔwɔ ƒe mɔnu siwo wu ƒe ewo, siwo ame miliɔn geɖe te kpɔ hedo kpɔ la ƒe taƒoƒo. Gake, wowɔe hã egbegbe CSS ƒe nɔnɔme kple aɖaŋu geɖe siwo míele kpɔkpɔm le web-browserwo me abe CSS Grid yeyea ene manɔmee.

Ale si wòwɔa dɔe

Le Bootstrap 5 me la, míetsɔ tiatia si nye be míana grid ɖoɖo si le vovo si wotu ɖe CSS Grid dzi la nawɔ dɔ, gake kple Bootstrap twist kpe ɖe eŋu. Ègakpɔtɔ xɔa klass siwo nàte ŋu awɔ dɔ le le wò didi nu be nàtu ɖoɖo siwo ɖoa nya ŋu, gake kple mɔnu bubu le ʋuƒoa te.

• CSS Grid nye tiatiawɔblɔɖe. Tsɔ grid ƒe ɖoɖo si woɖo ɖi la nawɔ dɔ to ɖoɖowɔwɔ me $enable-grid-classes: falseeye nàna CSS Grid la nawɔ dɔ to ɖoɖowɔwɔ me $enable-cssgrid: true. Emegbe, gbugbɔ ƒo wò Sass nu ƒu.

• Tsɔ kpɔɖeŋu siwo nye .rowkple .grid. Klas .gridla ɖoa display: grideye wòwɔa a grid-templatesi dzi nètu ɖo kple wò HTML.

• Tsɔ .col-*klasswo ɖɔ li .g-col-*klasswo. Esia le alea elabena míaƒe CSS Grid ƒe sɔtiwo zãa nɔnɔmea grid-columnɖe width.

• Woɖoa sɔtiwo kple gutter ƒe lolomewo to CSS ƒe tɔtrɔwo dzi. Ðo esiawo ɖe dzila la dzi .grideye nàtrɔ asi le eŋu alesi nèdi, le fli me alo le atsyãgbalẽ me, kple --bs-columnskple --bs-gap.

Le etsɔme la, Bootstrap anya trɔ ɖe hybrid egbɔkpɔnu ŋu elabena gapnunɔamesi la ɖo browser ƒe kpekpeɖeŋu blibo kloe na flexbox.

Vovototo vevi siwo le wo dome

Ne wotsɔe sɔ kple grid ɖoɖo si woɖo ɖi la:

• Flex dɔwɔnuwo mekpɔa ŋusẽ ɖe CSS Grid ƒe sɔtiwo dzi le mɔ ma ke nu o.

• Dowo xɔna ɖe tsiɖɔɖɔɖɔƒewo teƒe. Nɔnɔmea gapxɔ ɖe horizontal la teƒe paddingtso míaƒe default grid system la me eye wòwɔa dɔ wu abe margin.

• Abe alesi wòle ene la, to vovo na .rows la, .grids mekpɔa margin manyomanyo aɖeke o eye womateŋu azã margin utilities atsɔ atrɔ grid gutters o. Wowɔa grid ƒe dometsotsowo ŋudɔ le tsia dzi kple le tsia dzi le gɔmedzedzea me. Kpɔ akpa si nye asitɔtrɔ le nɔnɔmewo ŋu hena numeɖeɖe bubuwo.

• Ele be woabu atsyã siwo le fli me kple esiwo wowɔ ɖe ɖoɖo nu be wonye nusiwo woatsɔ aɖo tɔtrɔ ƒe hatsotsowo teƒe (le kpɔɖeŋu me, style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting wɔa dɔ nenema ke, gake ateŋu abia be nàgbugbɔ aɖo wò kɔlam ƒe xexlẽmewo ɖe nested ƒe kpɔɖeŋu ɖesiaɖe dzi .grid. Kpɔ akpa si nye atɔwɔwɔ hena numeɖeɖe bubuwo.

Kpɔɖeŋuwo

Sɔti etɔ̃

Woateŋu awɔ sɔti etɔ̃ siwo ƒe kekeme sɔ le nukpɔkpɔwo kple mɔ̃wo katã dzi to .g-col-4klassawo zazã me. Tsɔ klass siwo ɖoa nya ŋu kpee be nàtrɔ ɖoɖoa le nukpɔkpɔ ƒe lolome nu.

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

Nyaŋuɖoɖo

Zã klass siwo ɖoa nya ŋu nàtsɔ atrɔ asi le wò ɖoɖo ŋu le nukpɔkpɔwo katã me. Le afisia la, míedzea egɔme kple sɔti eve le nukpɔkpɔ ƒe ʋɔtru siwo le kpuie wu dzi, eye emegbe míetsina va ɖoa sɔti etɔ̃ le nukpɔkpɔ ƒe ʋɔtru siwo le titina kple esiwo wu nenema dzi.

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

Tsɔ ema sɔ kple sɔti eve ƒe ɖoɖo sia le nukpɔkpɔwo katã me.

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

Agbalẽxatsaxatsa

Grid nuawo xatsa ɖe fli si kplɔe ɖo dzi le wo ɖokui si ne teƒe megali le tsia dzi o. De dzesii be la gapku ɖe dometsotso siwo le tsia dzi kple esiwo le tsitrenu le grid nuawo dome ŋu.

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

Edzea egɔme

Gɔmedzedze ƒe klasswo ƒe taɖodzinue nye be yewoaɖɔli míaƒe default grid ƒe offset klasswo, gake womele ɖeka keŋkeŋ o. CSS Grid wɔa grid ƒe nɔnɔmetata to atsyã siwo gblɔna na web-browserwo be “woadze egɔme tso sɔti sia dzi” eye “woawu enu le kɔlam sia dzi.” Nɔnɔme mawoe nye grid-column-startkple grid-column-end. Gɔmedzedze ƒe klasswo nye gbãtɔa ƒe nuŋɔŋlɔ kpui. Tsɔ wo kpe ɖe sɔti ƒe klasswo ŋu be woalolo eye nàɖo wò sɔtiwo ɖe ɖoɖo nu alesi nèhiãe. Gɔmedzedze ƒe klasswo dzea egɔme tso 1abe alesi 0wònye asixɔxɔ si mesɔ o na nɔnɔme siawo ene.

<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 sɔtiwo

Ne klass aɖeke mele grid nuawo dzi o (a ƒe vi siwo te ɖe wo nɔewo ŋu .grid) la, grid nu ɖesiaɖe ƒe lolome aɖo sɔti ɖeka le eɖokui si.

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

Woateŋu atsaka nuwɔna sia kple grid column classes.

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

Atɔwɔwɔ

Abe míaƒe grid ɖoɖo si woɖo ɖi ene la, míaƒe CSS Grid la ɖea mɔ na .grids ƒe atɔwɔwɔ bɔbɔe. Gake to vovo na esi woɖo ɖi la, grid sia nyia tɔtrɔ siwo va le fliawo, sɔtiwo, kple dometsotsowo me dome. Bu kpɔɖeŋu si le ete ŋu kpɔ:

• Míetsɔa teƒea ƒe CSS tɔtrɔɖenu tsɔa kɔlam ƒe xexlẽme si woɖo ɖi la ɖa: --bs-columns: 3.
• Le auto-column gbãtɔ me la, wonyi sɔtiwo ƒe xexlẽme ƒe dome eye sɔti ɖesiaɖe nye kekeme si li ƒe akpa etɔ̃lia.
• Le auto-column evelia me la, míegbugbɔ ɖo column xexlẽme le nested la .griddzi ɖe 12 (míaƒe default).
• Nested content aɖeke mele auto-column etɔ̃lia me o.

Le nuwɔna me la esia ɖea mɔ na ɖoɖo siwo sesẽ wu eye wowɔ ɖe ɖoɖo nu wu ne wotsɔe sɔ kple míaƒe grid ɖoɖo si woɖo ɖi la.

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

Trɔtrɔ ɖe nɔnɔmewo ŋu

Trɔ asi le sɔtiwo ƒe xexlẽme, fliwo ƒe xexlẽme, kple dometsotsoawo ƒe kekeme ŋu kple teƒea ƒe CSS tɔtrɔwo.

Asixɔxɔ gbãtɔ aɖeke mele CSS ƒe tɔtrɔ siawo ŋu o; ke boŋ wowɔa fallback values ​​siwo wozãna vaseɖe esime wotsɔ nutoa me ƒe kpɔɖeŋu aɖe na. Le kpɔɖeŋu me, míezãa var(--bs-rows, 1)na míaƒe CSS Grid fliwo, si ŋea aɖaba ƒua --bs-rowsedzi elabena womeɖo ema ɖe afi aɖeke haɖe o. Ne enya wɔe ko la, .gridkpɔɖeŋua azã asixɔxɔ ma ɖe fallback value si nye 1.

Grid ƒe klass aɖeke meli o

Immediate children elements of .gridnye grid nuawo, eyata woawɔ woƒe lolome evɔ womatsɔ .g-colklass aɖeke kpee tẽ o.

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

Sɔtiwo kple dometsotsowo

Trɔ asi le sɔtiawo ƒe xexlẽme kple dometsotsoa ŋu.

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

Fliwo tsɔtsɔ kpee

Fli bubuwo tsɔtsɔ kpee kple sɔtiwo ƒe ɖoɖo tɔtrɔ:

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

Dometsotsowo

Trɔ dometsotso siwo le tsitrenu la to asitɔtrɔ le row-gap. De dzesii be míezãa gaple .grids dzi, gake row-gapkple column-gapwoate ŋu atrɔ asi le eŋu ne ehiã.

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

Le ema ta la, àteŋu akpɔ gaps vovovo siwo le tsitrenu kple esiwo le tsia dzi, siwo ateŋu axɔ asixɔxɔ ɖeka (axawo katã) alo asixɔxɔ eve (tsitrenu kple tsia dzi). Woateŋu awɔ esia ŋudɔ kple inline style na gap, alo kple míaƒe --bs-gapCSS tɔtrɔ.

<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 ƒe nyawo

CSS Grid ƒe seɖoƒe ɖeka enye be míaƒe klass gbãtɔwo gakpɔtɔ nye Sass ƒe tɔtrɔ eve, $grid-columnskple $grid-gutter-width. Esia ɖoa klass agbɔsɔsɔme si woawɔ le míaƒe CSS si míeƒo ƒu me la do ŋgɔ nyuie. Tiatia eve le asiwò le afisia:

• Trɔ asi le Sass ƒe tɔtrɔ mawo siwo woɖo ɖi la ŋu eye nàgbugbɔ aƒo wò CSS nu ƒu.
• Zã atsyã siwo le fli me alo esiwo wowɔ ɖe ɖoɖo nu nàtsɔ adzi klass siwo wona la ɖe edzi.

Le kpɔɖeŋu me, àteŋu adzi sɔtiwo ƒe xexlẽme ɖe edzi eye nàtrɔ dometsotso ƒe lolome, eye emegbe nàdzidze wò “sɔtiwo” ƒe lolome kple fli me atsyãwo kple CSS Grid sɔti ƒe hatsotso siwo woɖo do ŋgɔ ƒe tsakatsaka (le kpɔɖeŋu me, .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>