CSS Grid no ho nsɛm

Bootstrap default grid nhyehyɛe no gyina hɔ ma bɛboro mfe du a wɔde CSS nhyehyɛe ho akwan horow, a nnipa ɔpepem pii asɔ ahwɛ na wɔasɔ ahwɛ no awiei. Nanso, wɔsan nso yɛɛ no ​​a ɛnni nnɛyi CSS nneɛma ne akwan pii a yɛrehu wɔ browser ahorow te sɛ CSS Grid foforo no mu.

Sɛnea ɛyɛ adwuma

Bootstrap 5 no, yɛde ɔkwan a ɛbɛma grid nhyehyɛe a ɛyɛ soronko a wɔasisi wɔ CSS Grid so no ayɛ adwuma, nanso ɛwɔ Bootstrap twist aka ho. Woda so ara nya adesua ahorow a wubetumi de adi dwuma wɔ whim mu de akyekye nhyehyɛe ahorow a ɛyɛ mmuae, nanso ɔkwan soronko bi wɔ hood no ase.

• CSS Grid yɛ nea wobɛpaw sɛ wobɛkɔ mu. Ma default grid nhyehyɛe no nyɛ adwuma denam nhyehyɛe so $enable-grid-classes: falsena ma CSS Grid no nyɛ adwuma denam nhyehyɛe so $enable-cssgrid: true. Afei, san boaboa wo Sass no ano.

• Fa nhwɛso ahorow a ɛfa .rowne ho no si ananmu .grid. .gridKlas no hyehyɛ na display: gridɛyɛ grid-templatea wode wo HTML no si so.

• Fa .col-*adesua ahorow si adesua ahorow ananmu .g-col-*. Eyi te saa efisɛ yɛn CSS Grid columns no de grid-columnagyapade no di dwuma sen sɛ wɔde width.

• Wɔde CSS nsakrae ahorow so na wɔde adum ne gutter akɛse si hɔ. Fa eyinom si ɔwofo no so .gridna yɛ sɛnea wopɛ biara, inline anaa wɔ stylesheet mu, ne --bs-columnsne --bs-gap.

Daakye, ɛda adi sɛ Bootstrap bɛdan akɔ hybrid ano aduru so efisɛ gapɛkame ayɛ sɛ agyapade no anya browser mmoa a edi mũ ama flexbox.

Nsonsonoe atitiriw a ɛwɔ mu

Sɛ wode toto grid nhyehyɛe a wɔahyɛ da ayɛ no ho a:

• Flex utilities no nnya CSS Grid columns no so nkɛntɛnso wɔ ɔkwan koro no ara so.

• Gaps si nsu a ɛkɔ nsu mu no ananmu. Agyapade gapno sesa horizontal no paddingfi yɛn default grid nhyehyɛe no mu na ɛyɛ adwuma kɛse te sɛ margin.

• Sɛnea ɛte no, ɛnte sɛ .rows no, .grids nni margins a enye na margin utilities no ntumi mfa nsakra grid gutters no. Wɔde grid gaps no di dwuma wɔ ɔkwan a ɛkɔ soro ne nea ɛkɔ soro so default so. Hwɛ ɔfã a ɛfa customizing ho no na woanya ho nsɛm pii.

• Ɛsɛ sɛ wobu inline ne custom styles sɛ nea wɔde besi modifier classes ananmu (sɛ nhwɛso no, style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting yɛ adwuma saa ara, nanso ebia ɛbɛhwehwɛ sɛ wosan de wo kɔla akontaabu no si hɔ wɔ nested nhwɛso biara so .grid. Hwɛ nesting ɔfã no ma nsɛm no mu nsɛm.

Nhwɛso ahorow

Nnua abiɛsa

Wobetumi ayɛ nkorabata abiɛsa a ne tɛtrɛtɛ yɛ pɛ wɔ viewports ne mfiri nyinaa so denam .g-col-4adesua ahorow no a wɔde bedi dwuma no so. Fa adesua ahorow a ɛyɛ mmuae ka ho na sesa nhyehyɛe no denam viewport kɛse so.

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

Mmuae a wɔde ma

Fa adesua ahorow a ɛyɛ mmuae di dwuma fa sesa wo nhyehyɛe no wɔ viewports nyinaa so. Ɛha na yɛde nkyerɛwde abien na efi ase wɔ viewports a ɛyɛ teateaa sen biara no so, na afei yenyin kɔ columns abiɛsa wɔ medium viewports ne nea ɛboro saa so.

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

Fa ɛno toto saa kɔla abien nhyehyɛe yi ho wɔ viewports nyinaa so.

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

Nneɛma a wɔde kyekyere nneɛma ho

Grid nneɛma no ankasa kyekyere kɔ line a edi hɔ no so bere a baabi nni hɔ bio wɔ ɔkwan a ɛkɔ soro no so. Hyɛ no nsow sɛ gapɛfa nsonsonoe a ɛda grid nneɛma ntam a ɛda fam ne nea ɛda fam ho.

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

Efi ase

Start classes botae ne sɛ ɛbɛsesa yɛn default grid no offset classes no, nanso ɛnyɛ ade koro koraa. CSS Grid yɛ grid template denam styles a ɛka kyerɛ browser ahorow sɛ “mfi ase wɔ saa column yi so” ne “awie wɔ column yi so.” Saa agyapade ahorow no grid-column-startne ne grid-column-end. Start classes yɛ shorthand ma kan no. Fa wɔn ne column classes no bom ma ɛne wo columns no kɛse na ɛnyɛ pɛpɛɛpɛ sɛnea wuhia. Start classes fi ase wɔ 1sɛnea 0ɛyɛ botae a enni mu ma saa agyapade ahorow yi.

<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 nkyerɛwde ahorow

Sɛ adesua biara nni grid nneɛma no so (mma a wɔyɛ a .grid) no mma ntɛm ara a, grid adeɛ biara bɛyɛ ne kɛseɛ ayɛ no kɔla baako.

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

Wobetumi de saa suban yi afrafra grid column class ahorow mu.

<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 a wɔde yɛ buw

Te sɛ yɛn default grid nhyehyɛe no, yɛn CSS Grid no ma kwan ma ɛyɛ mmerɛw sɛ wobɛma .grids ayɛ nesting. Nanso, ɛnte sɛ default no, saa grid yi nya nsakrae wɔ rows, columns, ne gaps no mu. Susuw nhwɛso a ɛwɔ ase ha yi ho hwɛ:

• Yɛde local CSS variable bi to column dodow a wɔahyɛ da ayɛ no so: --bs-columns: 3.
• Wɔ auto-column a edi kan no mu no, wonya kɔla dodow no agyapade na kɔla biara yɛ ntrɛwmu a ɛwɔ hɔ no nkyem abiɛsa mu biako.
• Wɔ auto-column a ɛtɔ so mmienu no mu no, yɛasan ahyɛ column count wɔ nested .gridno so akɔ 12 (yɛn default).
• Auto-column a ɛtɔ so mmiɛnsa no nni nested content biara.

Wɔ nneyɛe mu no eyi ma kwan ma wɔyɛ nhyehyɛe ahorow a ɛyɛ den na ɛyɛ amanne bere a wɔde toto yɛn default grid nhyehyɛe no ho no.

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

Nneɛma a Wɔyɛ no Sɛnea Wɔpɛ

Fa local CSS variables sesa column dodow, row dodow, ne gaps no tɛtrɛtɛ.

Saa CSS nsakraeɛ yi nni default value biara; mmom no, wɔde fallback values ​​a wɔde di dwuma kosi sɛ wɔde local instance bɛma. Sɛ nhwɛsoɔ no, yɛde di dwuma var(--bs-rows, 1)ma yɛn CSS Grid rows, a ɛbu ani gu so --bs-rowsɛfiri sɛ wɔanhyehyɛ ɛno wɔ baabiara de besi nnɛ. Sɛ ɛba wie a, .gridnhwɛso no de saa botae no bedi dwuma sen sɛ ɛde fallback bo a ɛwɔ 1.

Grid adesua biara nni hɔ

Immediate children elements of .gridyɛ grid nneɛma, enti wɔbɛyɛ sized a wɔmfa .g-coladesuakuw bi nka ho pefee.

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

Ntrɛwmu ne ntamgyinafo

Yɛ nsakrae wɔ nkyerɛwde dodow ne ɔkwan a ɛda ntam no mu.

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

Nkyekyɛm ahorow a wɔde bɛka ho

Sɛ wode row pii bɛka ho na woasesa sɛnea wɔde column ahorow no besi hɔ:

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

Ntrɛwmu a ɛwɔ mu

Sesa nsonsonoe a ɛda hɔ no denam nsakrae a wobɛsakra no nkutoo so row-gap. Hyɛ no nsow sɛ yɛde di dwuma gapwɔ .grids so, nanso row-gapna column-gapwobetumi asesa sɛnea ɛho hia.

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

Esiane ɛno nti, wobɛtumi anya s a ɛsono vertical ne horizontal gap, a ɛbɛtumi afa botaeɛ baako (afã nyinaa) anaa botaeɛ mmienu (vertical ne horizontal). Yei betumi de inline style adi dwuma ama gap, anaa yɛn --bs-gapCSS variable.

<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

Anohyeto baako a ɛwɔ CSS Grid no mu ne sɛ yɛn default classes no da so ara yɛ Sass variables mmienu, $grid-columnsne $grid-gutter-width. Eyi di kan kyerɛ adesua dodow a wɔayɛ wɔ yɛn CSS a wɔaboaboa ano no mu yiye. Wowɔ nneɛma abien a wubetumi apaw wɔ ha:

• Sesa saa default Sass variables no na san boaboa wo CSS no ano.
• Fa inline anaa custom styles di dwuma de hyɛ adesua ahorow a wɔde ama no mu den.

Sɛ nhwɛsoɔ no, wobɛtumi ama kɔla dodoɔ no akɔ soro na woasesa gap kɛseɛ, na afei wode inline styles ne CSS Grid column class a wɔadi kan akyerɛkyerɛ mu (sɛ nhwɛsoɔ, .g-col-4) afrafra wo “columns” no kɛseɛ.

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