Clèithe CSS

Tha siostam clèithe bunaiteach Bootstrap a’ riochdachadh crìoch air còrr air deich bliadhna de dhòighean cruth CSS, air fheuchainn agus air an deuchainn le milleanan de dhaoine. Ach, chaidh a chruthachadh cuideachd às aonais mòran de na feartan agus na dòighean CSS ùr-nodha a tha sinn a’ faicinn ann am brobhsairean mar an Ghriod CSS ùr.

Mar a tha e ag obair

Le Bootstrap 5, tha sinn air an roghainn a chuir ris gus siostam clèithe air leth a thogail a tha air a thogail air CSS Grid, ach le tionndadh Bootstrap. Gheibh thu fhathast clasaichean as urrainn dhut a chuir a-steach air whim gus dealbhadh freagairteach a thogail, ach le dòigh-obrach eadar-dhealaichte fon chochall.

• Tha CSS Grid a’ tarraing a-steach. Cuir dheth an siostam clèithe bunaiteach le bhith a’ suidheachadh $enable-grid-classes: falseagus a’ comasachadh a’ ghriod CSS le bhith a’ suidheachadh $enable-cssgrid: true. An uairsin, cuir ri chèile do Sass.

• Cuir an àite eisimpleirean .rowle .grid. Bidh an .gridclas a’ suidheachadh display: gridagus a’ cruthachadh fear grid-templatea thogas tu air leis an HTML agad.

• Cuir .col-*clasaichean an àite .g-col-*clasaichean. Tha seo air sgàth gu bheil na colbhan Clèithe CSS againn a’ cleachdadh an grid-columntogalaich an àite width.

• Tha colbhan agus meudan cutairean air an suidheachadh tro chaochladairean CSS. Suidhich iad sin air a’ phàrant .gridagus gnàthaich ge bith dè a tha thu ag iarraidh, ann an loidhne no ann an duilleag stoidhle, le --bs-columnsagus --bs-gap.

Anns an àm ri teachd, tha coltas ann gun gluais Bootstrap gu fuasgladh tar-chinealach leis gu bheil an gaptogalach air taic cha mhòr làn bhrobhsair fhaighinn airson flexbox.

Prìomh eadar-dhealachaidhean

An coimeas ris an t-siostam clèithe bunaiteach:

• Cha bhith goireasan sùbailte a’ toirt buaidh air colbhan CSS Grid san aon dòigh.

• Bidh beàrnan a’ dol an àite cutairean. Bidh an gaptogalach a’ dol an àite a ’chòmhnard paddingbhon t-siostam clèithe àbhaisteach againn agus ag obair nas coltaiche ri margin.

• Mar sin, eu -coltach ri .rows, .gridchan eil oirean àicheil aig s agus chan urrainnear goireasan iomaill a chleachdadh gus cutairean a’ ghriod atharrachadh. Tha beàrnan clèithe air an cur an sàs gu còmhnard agus gu dìreach mar as trice. Faic an roinn gnàthachaidh airson tuilleadh fiosrachaidh.

• Bu chòir coimhead air stoidhlichean in-loidhne agus gnàthaichte mar chlasaichean atharrachaidh (me, style="--bs-columns: 3;"vs class="row-cols-3").

• Bidh neadachadh ag obair san aon dòigh, ach dh’ fhaodadh gum feum thu na cunntasan colbh agad ath-shuidheachadh air gach eisimpleir de nead .grid. Faic an roinn neadachaidh airson mion-fhiosrachadh.

Eisimpleirean

Trì colbhan

Faodar trì colbhan den aon leud thairis air a h-uile port-seallaidh agus inneal a chruthachadh le bhith a’ cleachdadh nan .g-col-4clasaichean. Cuir clasaichean freagairteach ris gus an cruth atharrachadh a rèir meud sealladh-seallaidh.

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

Freagarrach

Cleachd clasaichean freagairteach gus do chruth atharrachadh thairis air puirt-seallaidh. An seo bidh sinn a’ tòiseachadh le dà cholbh air na puirt-seallaidh as cumhainge, agus an uairsin a’ fàs gu trì colbhan air puirt-seallaidh meadhanach agus gu h-àrd.

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

Dèan coimeas eadar sin agus an cruth dà cholbh seo aig a h-uile port-seallaidh.

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

Clò-bhualadh

Bidh nithean clèithe a’ cuairteachadh gu fèin-ghluasadach chun ath loidhne nuair nach eil barrachd rùm ann gu còmhnard. Thoir an aire gu bheil seo a’ gapbuntainn ri beàrnan còmhnard is dìreach eadar nithean clèithe.

<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' tòiseachadh

Tha clasaichean tòiseachaidh ag amas air na clasaichean frith-rathaid bunaiteach againn a chur an àite, ach chan eil iad gu tur mar an ceudna. Bidh CSS Grid a’ cruthachadh teamplaid clèithe tro stoidhlichean a dh’ iarras air brobhsairean “tòiseachadh aig a’ cholbh seo ”agus“ crìochnachadh aig a ’cholbh seo." Tha na togalaichean sin grid-column-startagus grid-column-end. Tha clasaichean tòiseachaidh nan làmh-ghoirid airson a’ chiad fhear. Paidhir iad leis na clasaichean colbh gu meud agus co-thaobhadh do cholbhan ge bith dè a dh’ fheumas tu. Bidh clasaichean tòiseachaidh a’ tòiseachadh aig 1mar 0a tha luach neo-dhligheach airson nan togalaichean sin.

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

Colbhan fèin-ghluasadach

Nuair nach eil clasaichean air na nithean clèithe (clann dìreach a .grid), thèid gach nì clèithe a mheudachadh gu fèin-ghluasadach gu aon cholbh.

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

Faodar an giùlan seo a mheasgachadh le clasaichean colbh clèithe.

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

A' neadachadh

Coltach ris an t-siostam clèithe àbhaisteach againn, tha an Grid CSS againn a’ ceadachadh neadachadh furasta de .grids. Ach, eu-coltach ris an àbhaist, tha a’ ghriod seo a’ sealbhachadh atharrachaidhean anns na sreathan, na colbhan, agus na beàrnan. Beachdaich air an eisimpleir gu h-ìosal:

• Bidh sinn a’ dol thairis air an àireamh bhunaiteach de cholbhan le caochladair CSS ionadail: --bs-columns: 3.
• Anns a’ chiad fèin-cholbh, tha cunntas a’ cholbh air a shealbhachadh agus tha gach colbh trian den leud a tha ri fhaotainn.
• Anns an dàrna fèin-cholbh, tha sinn air cunntas a’ cholbh ath-shuidheachadh air an neadachadh .gridgu 12 (am fear àbhaisteach againn).
• Chan eil susbaint neadachaidh aig an treas fèin-cholbh.

Ann an cleachdadh tha seo a’ ceadachadh dealbhadh nas iom-fhillte agus àbhaisteach an taca ris an t-siostam clèithe àbhaisteach againn.

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

Gnàthachadh

Gnàthaich an àireamh de cholbhan, an àireamh de shreathan, agus leud nam beàrnan le caochladairean CSS ionadail.

Chan eil luach bunaiteach aig na caochladairean CSS seo; an àite sin, bidh iad a’ cur an sàs luachan cùl-taic a thathas a’ cleachdadh gus an tèid eisimpleir ionadail a thoirt seachad. Mar eisimpleir, bidh sinn a’ cleachdadh var(--bs-rows, 1)airson na sreathan CSS Grid againn, a tha a’ seachnadh --bs-rowsleis nach deach sin a shuidheachadh an àite sam bith fhathast. Aon uair ‘s gu bheil e, .gridcleachdaidh an eisimpleir an luach sin an àite luach cùl-taic 1.

Gun chlasaichean clèithe

Tha clann sa bhad nan eileamaidean .gridclèithe, agus mar sin bidh iad air am meud gun a bhith a’ cur .g-colclas ris gu soilleir.

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

Colbhan agus beàrnan

Atharraich an àireamh de cholbhan agus a 'bheàrn.

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

A' cur sreathan ris

A’ cur barrachd shreathan ris agus ag atharrachadh suidheachadh nan colbhan:

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

Beàrnan

Atharraich na beàrnan dìreach dìreach le bhith ag atharrachadh am faidhle row-gap. Thoir an aire gu bheil sinn a 'cleachdadh gapair .grids, ach row-gapagus column-gapfaodar atharrachadh mar a dh' fheumar.

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

Air sgàth sin, faodaidh tu eadar-dhealaichte dìreach agus còmhnard a bhith agad gap, a dh'fhaodas aon luach a ghabhail (gach taobh) no paidhir luachan (dìreach agus còmhnard). Faodar seo a chuir an sàs le stoidhle in-loidhne airson gap, no leis a’ --bs-gapchaochladair CSS againn.

<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

Is e aon chuingealachadh air Grid CSS gu bheil na clasaichean bunaiteach againn fhathast air an gineadh le dà chaochladair Sass, $grid-columnsagus $grid-gutter-width. Tha seo gu h-èifeachdach a’ dearbhadh na h-àireamh de chlasaichean a chaidh a chruthachadh anns an CSS a chuir sinn ri chèile. Tha dà roghainn agad an seo:

• Atharraich na caochladairean Sass bunaiteach sin agus ath-chruinnich do CSS.
• Cleachd stoidhlichean in-loidhne no gnàthaichte gus cur ris na clasaichean a chaidh a sholarachadh.

Mar eisimpleir, faodaidh tu àireamh nan colbhan àrdachadh agus meud na beàrn atharrachadh, agus an uairsin na “colbhan” agad a mheudachadh le measgachadh de stoidhlichean in-loidhne agus clasaichean colbh CSS Grid ro-mhìnichte (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>