Grid CSS

Mae system grid rhagosodedig Bootstrap yn benllanw dros ddegawd o dechnegau gosodiad CSS, sydd wedi cael eu profi gan filiynau o bobl. Ond, fe'i crëwyd hefyd heb lawer o'r nodweddion a'r technegau CSS modern rydyn ni'n eu gweld mewn porwyr fel y Grid CSS newydd.

Sut mae'n gweithio

Gyda Bootstrap 5, rydym wedi ychwanegu'r opsiwn i alluogi system grid ar wahân sydd wedi'i hadeiladu ar CSS Grid, ond gyda thro Bootstrap. Rydych chi'n dal i gael dosbarthiadau y gallwch chi eu gwneud ar fympwy i adeiladu cynlluniau ymatebol, ond gyda dull gwahanol o dan y cwfl.

• Mae Grid CSS yn optio i mewn. Analluoga'r system grid rhagosodedig trwy osod $enable-grid-classes: falsea galluogi'r Grid CSS trwy osod $enable-cssgrid: true. Yna, ail-grynhoi eich Sass.

• Amnewid enghreifftiau o .rowgyda .grid. Mae'r .griddosbarth yn gosod display: gridac yn creu fersiwn grid-templaterydych chi'n adeiladu arno gyda'ch HTML.

• Disodli .col-*dosbarthiadau gyda .g-col-*dosbarthiadau. Mae hyn oherwydd bod ein colofnau Grid CSS yn defnyddio'r grid-columnpriodwedd yn lle width.

• Mae maint colofnau a gwteri yn cael eu gosod trwy newidynnau CSS. Gosodwch y rhain ar y rhiant .gridac addaswch sut bynnag y dymunwch, yn unol neu mewn taflen arddull, gyda --bs-columnsa --bs-gap.

Yn y dyfodol, mae'n debygol y bydd Bootstrap yn symud i ddatrysiad hybrid gan fod yr gapeiddo wedi sicrhau cefnogaeth porwr bron yn llawn ar gyfer flexbox.

Gwahaniaethau allweddol

O'i gymharu â'r system grid rhagosodedig:

• Nid yw cyfleustodau hyblyg yn effeithio ar golofnau Grid CSS yn yr un modd.

• Mae bylchau yn cymryd lle cwteri. Mae'r gapeiddo yn disodli'r llorweddol paddingo'n system grid rhagosodedig ac mae'n gweithredu'n debycach margin.

• Fel y cyfryw, yn wahanol i .rows, .gridnid oes gan s unrhyw ymylon negyddol ac ni ellir defnyddio cyfleustodau ymyl i newid y cwteri grid. Mae bylchau grid yn cael eu cymhwyso'n llorweddol ac yn fertigol yn ddiofyn. Gweler yr adran addasu am ragor o fanylion.

• Dylid ystyried arddulliau mewnol ac arfer yn lle dosbarthiadau addaswyr (ee, style="--bs-columns: 3;"vs class="row-cols-3").

• Mae nythu yn gweithio yn yr un modd, ond efallai y bydd angen i chi ailosod eich cyfrif colofnau ar bob achos o nyth .grid. Gweler yr adran nythu am fanylion.

Enghreifftiau

Tair colofn

Gellir creu tair colofn lled cyfartal ar draws yr holl fannau gwylio a dyfeisiau trwy ddefnyddio'r .g-col-4dosbarthiadau. Ychwanegu dosbarthiadau ymatebol i newid y cynllun yn ôl maint y porth gwylio.

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

Ymatebol

Defnyddiwch ddosbarthiadau ymatebol i addasu eich cynllun ar draws pyrth gwylio. Yma rydym yn dechrau gyda dwy golofn ar y meysydd gwylio culaf, ac yna'n tyfu i dair colofn ar olygfannau canolig ac uwch.

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

Cymharwch hynny â'r cynllun dwy golofn hwn ym mhob man gwylio.

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

Lapio

Mae eitemau grid yn lapio'n awtomatig i'r llinell nesaf pan nad oes mwy o le yn llorweddol. Sylwch fod hyn yn gapberthnasol i fylchau llorweddol a fertigol rhwng eitemau grid.

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

Yn dechrau

Nod dosbarthiadau cychwyn yw disodli dosbarthiadau gwrthbwyso ein grid rhagosodedig, ond nid ydynt yn hollol yr un peth. Mae CSS Grid yn creu templed grid trwy arddulliau sy'n dweud wrth borwyr i "ddechrau yn y golofn hon" a "gorffen yn y golofn hon." Yr eiddo hynny yw grid-column-starta grid-column-end. Llaw-fer yw dosbarthiadau cychwyn ar gyfer y cyntaf. Pârwch nhw gyda'r dosbarthiadau colofn i faint ac aliniwch eich colofnau sut bynnag y mae eu hangen arnoch chi. Mae dosbarthiadau cychwyn yn dechrau 1fel 0y mae gwerth annilys ar gyfer y priodweddau hyn.

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

Colofnau Auto

Pan nad oes dosbarthiadau ar yr eitemau grid (plant agosaf .grid), bydd pob eitem grid yn awtomatig yn cael ei maint i un golofn.

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

Gellir cymysgu'r ymddygiad hwn â dosbarthiadau colofn grid.

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

Nythu

Yn debyg i'n system grid rhagosodedig, mae ein Grid CSS yn caniatáu ar gyfer nythu .grids. Fodd bynnag, yn wahanol i'r rhagosodiad, mae'r grid hwn yn etifeddu newidiadau yn y rhesi, y colofnau a'r bylchau. Ystyriwch yr enghraifft isod:

• Rydym yn diystyru'r nifer rhagosodedig o golofnau gyda newidyn CSS lleol: --bs-columns: 3.
• Yn yr auto-golofn gyntaf, mae cyfrif y golofn yn cael ei etifeddu ac mae pob colofn yn draean o'r lled sydd ar gael.
• Yn yr ail auto-golofn, rydym wedi ailosod y cyfrif colofn ar y nyth .gridi 12 (ein rhagosodiad).
• Nid oes gan y drydedd golofn auto unrhyw gynnwys nythu.

Yn ymarferol mae hyn yn caniatáu ar gyfer cynlluniau mwy cymhleth ac wedi'u teilwra o'u cymharu â'n system grid rhagosodedig.

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

Addasu

Addaswch nifer y colofnau, nifer y rhesi, a lled y bylchau gyda newidynnau CSS lleol.

Nid oes gan y newidynnau CSS hyn unrhyw werth rhagosodedig; yn lle hynny, maent yn cymhwyso gwerthoedd wrth gefn a ddefnyddir hyd nes y darperir enghraifft leol. Er enghraifft, rydym yn defnyddio var(--bs-rows, 1)ar gyfer ein rhesi Grid CSS, sy'n anwybyddu --bs-rowsoherwydd nad yw hynny wedi'i osod yn unman eto. Unwaith y bydd, bydd yr .gridenghraifft yn defnyddio'r gwerth hwnnw yn lle gwerth wrth gefn 1.

Dim dosbarthiadau grid

Eitemau grid yw elfennau plant .griduniongyrchol, felly byddant yn cael eu maint heb ychwanegu .g-coldosbarth yn benodol.

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

Colofnau a bylchau

Addaswch nifer y colofnau a'r bwlch.

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

Ychwanegu rhesi

Ychwanegu mwy o resi a newid lleoliad colofnau:

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

Bylchau

Newidiwch y bylchau fertigol dim ond trwy addasu'r row-gap. Sylwch ein bod yn defnyddio gapon .grids, ond row-gapa column-gapgellir eu haddasu yn ôl yr angen.

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

Oherwydd hynny, gallwch gael gaps fertigol a llorweddol gwahanol, a all gymryd gwerth sengl (pob ochr) neu bâr o werthoedd (fertigol a llorweddol). Gellir cymhwyso hwn gydag arddull alinol ar gyfer gap, neu gyda'n --bs-gapnewidyn CSS.

<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

Un cyfyngiad ar y Grid CSS yw bod ein dosbarthiadau diofyn yn dal i gael eu cynhyrchu gan ddau newidyn Sass, $grid-columnsa $grid-gutter-width. Mae hyn i bob pwrpas yn rhagbennu nifer y dosbarthiadau a gynhyrchir yn ein CSS a luniwyd. Mae gennych ddau opsiwn yma:

• Addaswch y newidynnau Sass rhagosodedig hynny ac ail-grynhoi eich CSS.
• Defnyddiwch arddulliau mewnol neu arferol i ychwanegu at y dosbarthiadau a ddarperir.

Er enghraifft, gallwch gynyddu'r cyfrif colofnau a newid maint y bwlch, ac yna maint eich “colofnau” gyda chymysgedd o arddulliau mewnol a dosbarthiadau colofn Grid CSS wedi'u diffinio ymlaen llaw (ee, .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>