CSS Akoj

Eto akoj aiyipada Bootstrap duro fun ipari ti o ju ọdun mẹwa ti awọn ilana iṣeto CSS, gbiyanju ati idanwo nipasẹ awọn miliọnu eniyan. Ṣugbọn, o tun ṣẹda laisi ọpọlọpọ awọn ẹya CSS ode oni ati awọn ilana ti a n rii ni awọn aṣawakiri bi Grid CSS tuntun.

Bawo ni o ṣe n ṣiṣẹ

Pẹlu Bootstrap 5, a ti ṣafikun aṣayan lati jẹki eto akoj lọtọ ti a ṣe lori Grid CSS, ṣugbọn pẹlu lilọ Bootstrap kan. O tun gba awọn kilasi ti o le lo lori ifẹ lati kọ awọn ipilẹ idahun, ṣugbọn pẹlu ọna ti o yatọ labẹ Hood.

• CSS Grid ti wa ni ijade. Pa eto akoj aiyipada kuro nipa siseto $enable-grid-classes: falseati mu Akoj CSS ṣiṣẹ nipasẹ ṣiṣeto $enable-cssgrid: true. Lẹhinna, ṣajọpọ Sass rẹ.

• Rọpo awọn apẹẹrẹ .rowpẹlu .grid. .gridKilasi ṣeto display: gridati ṣẹda kan ti grid-templateo kọ lori pẹlu HTML rẹ.

• Rọpo .col-*awọn kilasi pẹlu .g-col-*awọn kilasi. Eyi jẹ nitori awọn ọwọn CSS Grid wa lo ohun- grid-columnini dipo width.

• Awọn ọwọn ati awọn iwọn gota ti ṣeto nipasẹ awọn oniyipada CSS. Ṣeto iwọnyi sori obi .gridati ṣe akanṣe bi o ṣe fẹ, inline tabi ni iwe aṣa, pẹlu --bs-columnsati --bs-gap.

Ni ọjọ iwaju, Bootstrap yoo ṣee yipada si ojutu arabara bi ohun- gapini naa ti ṣaṣeyọri atilẹyin ẹrọ aṣawakiri ni kikun fun flexbox.

Iyatọ bọtini

Ti a fiwera si eto akoj aiyipada:

• Awọn ohun elo Flex ko ni ipa lori awọn ọwọn Grid CSS ni ọna kanna.

• Awọn ela rọpo awọn gutters. Ohun gap-ini rọpo petele paddinglati eto akoj aiyipada wa ati awọn iṣẹ bii margin.

• Bi iru bẹẹ, ko dabi .rowawọn s, .grids ko ni awọn ala odi ati awọn ohun elo ala ko le ṣee lo lati yi awọn gutters akoj pada. Awọn ela akoj ni a lo ni ita ati ni inaro nipasẹ aiyipada. Wo apakan isọdi -ara fun awọn alaye diẹ sii.

• Awọn ọna inline ati aṣa yẹ ki o wo bi awọn iyipada fun awọn kilasi iyipada (fun apẹẹrẹ, style="--bs-columns: 3;"vs class="row-cols-3").

• Itẹiyẹ n ṣiṣẹ bakanna, ṣugbọn o le nilo ki o tun awọn iṣiro ọwọn rẹ sori apẹẹrẹ kọọkan ti itẹ-ẹiyẹ kan .grid. Wo apakan itẹ -ẹiyẹ fun awọn alaye.

Awọn apẹẹrẹ

Awọn ọwọn mẹta

Awọn ọwọn iwọn dogba mẹta kọja gbogbo awọn iwowo ati awọn ẹrọ le ṣee ṣẹda nipasẹ lilo awọn .g-col-4kilasi. Ṣafikun awọn kilasi idahun lati yi ifilelẹ pada nipasẹ iwọn wiwo.

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

Idahun

Lo awọn kilasi idahun lati ṣatunṣe ifilelẹ rẹ kọja awọn ibudo wiwo. Nibi ti a bẹrẹ pẹlu meji ọwọn lori awọn dín viewports, ati ki o si dagba si mẹta ọwọn lori alabọde viewports ati loke.

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

Ṣe afiwe iyẹn si ipilẹ ọwọn meji yii ni gbogbo awọn ibudo wiwo.

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

Fi ipari si

Awọn nkan aropo laifọwọyi fi ipari si laini atẹle nigbati ko si yara diẹ sii ni petele. Ṣe akiyesi pe ohun gapelo naa kan si awọn alafo petele ati inaro laarin awọn ohun akoj.

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

Bẹrẹ

Awọn kilaasi bẹrẹ ni ifọkansi lati rọpo awọn kilasi aiṣedeede grid aiyipada, ṣugbọn wọn kii ṣe kanna patapata. Akoj CSS ṣẹda awoṣe akoj kan nipasẹ awọn aza ti o sọ fun awọn aṣawakiri lati “bẹrẹ ni ọwọn yii” ati “pari ni iwe yii.” Awọn ohun-ini naa jẹ grid-column-startati grid-column-end. Awọn kilasi ibẹrẹ jẹ kukuru fun iṣaaju. Pa wọn pọ pẹlu awọn kilasi ọwọn si iwọn ati ki o ṣe afiwe awọn ọwọn rẹ sibẹsibẹ o nilo. Awọn kilaasi bẹrẹ ni 1bii 0iye ti ko wulo fun awọn ohun-ini wọnyi.

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

Awọn ọwọn aifọwọyi

Nigbati ko ba si awọn kilasi lori awọn ohun akoj (awọn ọmọ lẹsẹkẹsẹ ti a .grid), kọọkan akoj ohun kan yoo laifọwọyi wa ni iwọn si ọkan iwe.

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

Ihuwasi yii le ni idapọ pẹlu awọn kilasi ọwọn akoj.

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

Itẹle

Iru si eto akoj aiyipada wa, Grid CSS wa ngbanilaaye fun itẹ-ẹiyẹ rọrun ti .grids. Sibẹsibẹ, ko dabi aiyipada, akoj yii jogun awọn ayipada ninu awọn ori ila, awọn ọwọn, ati awọn ela. Wo apẹẹrẹ ni isalẹ:

• A dojukọ nọmba aiyipada ti awọn ọwọn pẹlu oniyipada CSS agbegbe: --bs-columns: 3.
• Ninu iwe-alafọwọyi akọkọ, kika iwe ti jogun ati iwe kọọkan jẹ idamẹta ti iwọn to wa.
• Ninu iwe-alafọwọyi keji, a ti tun iwọn kika ọwọn sori itẹ-ẹiyẹ .gridsi 12 (aiyipada wa).
• Iwe-alafọwọyi kẹta ko ni akoonu itẹ-ẹiyẹ.

Ni iṣe eyi ngbanilaaye fun eka diẹ sii ati awọn ipilẹ aṣa nigba akawe si eto akoj aiyipada wa.

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

Isọdi ara ẹni

Ṣe akanṣe nọmba awọn ọwọn, nọmba awọn ori ila, ati iwọn awọn ela pẹlu awọn oniyipada CSS agbegbe.

Awọn oniyipada CSS wọnyi ko ni iye aiyipada; dipo, wọn lo awọn iye-pada sẹhin ti a lo titi ti a fi pese apẹẹrẹ agbegbe kan. Fun apẹẹrẹ, a lo var(--bs-rows, 1)fun awọn ori ila CSS Grid wa, eyiti o kọju --bs-rowsnitori iyẹn ko ti ṣeto nibikibi sibẹsibẹ. Ni kete ti o ba jẹ, .gridapẹẹrẹ yoo lo iye yẹn dipo iye isubu ti 1.

Ko si awọn kilasi akoj

Awọn eroja ọmọ lẹsẹkẹsẹ .gridjẹ awọn ohun akoj, nitorinaa wọn yoo ni iwọn laisi fifi .g-colkilasi kan kun ni gbangba.

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

Awọn ọwọn ati awọn ela

Ṣatunṣe nọmba awọn ọwọn ati aafo naa.

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

Fifi awọn ori ila

Ṣafikun awọn ori ila diẹ sii ati yiyipada gbigbe awọn ọwọn:

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

Awọn ela

Yipada awọn ela inaro nikan nipa yiyipada row-gap. Akiyesi pe a lo gaplori .grids, ṣugbọn row-gapati ki o column-gaple wa ni títúnṣe bi ti nilo.

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

Nitori eyi, o le ni oriṣiriṣi inaro ati petele gaps, eyiti o le gba iye kan (gbogbo awọn ẹgbẹ) tabi bata ti iye (inaro ati petele). Eyi le ṣee lo pẹlu ara inline fun gap, tabi pẹlu --bs-gaponiyipada CSS wa.

<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

Idiwọn kan ti Akoj CSS ni pe awọn kilasi aiyipada wa tun jẹ ipilẹṣẹ nipasẹ awọn oniyipada Sass meji, $grid-columnsati $grid-gutter-width. Eyi ni imunadoko ṣe ipinnu nọmba awọn kilasi ti ipilẹṣẹ ninu CSS ti a ṣe akojọpọ. O ni awọn aṣayan meji nibi:

• Ṣe atunṣe awọn oniyipada Sass aiyipada wọnyẹn ki o tun ṣajọ CSS rẹ.
• Lo opopo tabi awọn aṣa aṣa lati ṣe alekun awọn kilasi ti a pese.

Fun apẹẹrẹ, o le pọ si kika iwe ki o yi iwọn aafo naa pada, lẹhinna ṣe iwọn “awọn ọwọn” rẹ pẹlu akojọpọ awọn aza inline ati awọn kilasi iwe-itumọ CSS Grid tẹlẹ (fun apẹẹrẹ, .g-col-4).

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