Eangach CSS

Is ionann córas greille réamhshocraithe Bootstrap agus bailchríoch ar níos mó ná deich mbliana de theicnící leagan amach CSS, a ndearna na milliúin daoine triail orthu agus a ndearna siad tástáil orthu. Ach, cruthaíodh é freisin gan go leor de na gnéithe agus na teicnící CSS nua-aimseartha atá á fheiceáil againn i mbrabhsálaithe cosúil leis an Eangach CSS nua.

Conas a oibríonn sé

Le Bootstrap 5, chuireamar an rogha leis chun córas greille ar leith a chumasú atá tógtha ar Eangach CSS, ach le casadh Bootstrap air. Faigheann tú ranganna fós is féidir leat iarratas a dhéanamh ar whim chun leagan amach sofhreagrach a thógáil, ach le cur chuige difriúil faoin gcochall.

• Is rogha an diúltaithe é Eangach CSS. Díchumasaigh an córas greille réamhshocraithe tríd $enable-grid-classes: falsean Eangach CSS a shocrú agus a chumasú trí $enable-cssgrid: true. Ansin, athchruinnigh do Sass.

• Cuir samplaí in ionad .rowle .grid. Socraíonn agus cruthaíonn an .gridrang ceann a thógann tú air le do HTML.display: gridgrid-template

• .col-*Ranganna a chur in ionad .g-col-*ranganna. Tá sé seo amhlaidh toisc go n-úsáideann ár gcolúin Eangaí CSS an t- grid-columnairí seachas width.

• Socraítear colúin agus méideanna gáitéir trí athróga CSS. Socraigh iad seo ar an tuismitheoir .gridagus cuir in oiriúint mar is mian leat, inlíne nó i stílbhileog, le --bs-columnsagus --bs-gap.

Sa todhchaí, is dócha go n-aistreoidh Bootstrap chuig réiteach hibrideach mar go gapbhfuil tacaíocht bhrabhsálaí iomlán beagnach iomlán bainte amach ag an réadmhaoin do flexbox.

Difríochtaí tábhachtacha

I gcomparáid leis an gcóras greille réamhshocraithe:

• Ní chuireann fóntais flex isteach ar cholúin Eangaí CSS ar an mbealach céanna.

• Tagann bearnaí in ionad gáitéir. Tagann an gapmhaoin in ionad an chothrománach paddingónár gcóras greille réamhshocraithe agus feidhmeanna níos mó cosúil le margin.

• Mar sin, murab ionann agus .rows, .gridníl aon chorrlaigh diúltacha ag s agus ní féidir fóntais corrlaigh a úsáid chun gáitéir na greille a athrú. Cuirtear bearnaí greille i bhfeidhm go cothrománach agus go hingearach de réir réamhshocraithe. Féach an rannán um shaincheapadh le haghaidh tuilleadh sonraí.

• Ba cheart breathnú ar stíleanna inlíne agus saincheaptha mar ionadaithe do ranganna mionathraithe (m.sh., style="--bs-columns: 3;"vs class="row-cols-3").

• Oibríonn neadú mar an gcéanna, ach d'fhéadfadh go mbeadh ort do chomhaireamh colúin a athshocrú ar gach ásc de nead .grid. Féach an rannán neadaithe le haghaidh sonraí.

Samplaí

Trí cholún

Is féidir trí cholún ar chomhleithead thar gach radharc agus gléas a chruthú trí na .g-col-4ranganna a úsáid. Cuir ranganna sofhreagracha leis chun an leagan amach a athrú de réir mhéid an amhairc.

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

Sofhreagrach

Bain úsáid as ranganna sofhreagracha chun do leagan amach a choigeartú thar amhairc. Anseo tosaímid le dhá cholún ar na hamharcphoirt is cúinge, agus ansin fásaimid go trí cholún ar pháirceanna meánmhéide agus os a chionn.

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

Cuir é sin i gcomparáid leis an leagan amach dhá cholún seo ag gach radharc.

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

Timfhilleadh

Timfhilleadh míreanna greille go huathoibríoch go dtí an chéad líne eile nuair nach bhfuil níos mó seomra go cothrománach. Tabhair faoi deara go bhfuil gapfeidhm aige maidir le bearnaí cothrománacha agus ingearacha idir míreanna greille.

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

Tosaíonn

Tá sé mar aidhm ag ranganna tosaigh ranganna fritháirimh ár ngreille réamhshocraithe a athsholáthar, ach ní hionann iad go hiomlán. Cruthaíonn Eangach CSS teimpléad greille trí stíleanna a insíonn do bhrabhsálaithe “tosú ag an gcolún seo” agus “críochnú ag an gcolún seo.” Tá na maoine grid-column-startagus grid-column-end. Is gearrscileanna iad na ranganna tosaigh don chéad rang. Péireáil leis na haicmí colún iad de réir méide agus ailíniú do cholúin, mar is gá duit. Tosaíonn ranganna tosaithe ag 1luach 0neamhbhailí na maoine seo.

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

Colúin uathoibríoch

Nuair nach mbíonn aon ranganna ar na míreanna eangaí (páistí neasa .grid), déanfar gach mír ghreille a mhéid go huathoibríoch go colún amháin.

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

Is féidir an iompar seo a mheascadh le ranganna colúin ghreille.

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

Neadaithe

Cosúil lenár gcóras greille réamhshocraithe, ceadaíonn ár nEangach CSS do neadú éasca .grids. Murab ionann agus an réamhshocrú, áfach, faigheann an eangach seo athruithe sna sraitheanna, sna colúin agus sna bearnaí. Smaoinigh ar an sampla thíos:

• Sáraítear líon réamhshocraithe na gcolún a bhfuil athróg áitiúil CSS acu: --bs-columns: 3.
• Sa chéad cholún uathoibríoch, faightear comhaireamh na gcolún le hoidhreacht agus tá gach colún aon trian den leithead atá ar fáil.
• Sa dara colún uathoibríoch, athshocraíomar an comhaireamh colún ar an nead .gridgo dtí 12 (ár réamhshocrú).
• Níl aon ábhar neadaithe sa tríú auto-colún.

Go praiticiúil ceadaíonn sé seo do leagan amach níos casta agus níos saincheaptha i gcomparáid lenár gcóras greille réamhshocraithe.

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

Saincheapadh

Saincheap líon na gcolún, líon na sraitheanna, agus leithead na bearnaí le hathróga CSS áitiúla.

Níl aon luach réamhshocraithe ag na hathróga CSS seo; ina ionad sin, cuireann siad luachanna cúltaca i bhfeidhm a úsáidtear go dtí go gcuirtear cás áitiúil ar fáil. Mar shampla, úsáidimid var(--bs-rows, 1)le haghaidh ár sraitheanna Eangaí CSS, a neamhaird --bs-rowstoisc nach bhfuil socraithe in áit ar bith go fóill. Nuair a bheidh sé, .gridúsáidfidh an t-ásc an luach sin in ionad luach an chúltaca 1.

Uimh ranganna greille

Is míreanna eangaí iad na páistí láithreacha .grid, mar sin déanfar iad a mhéid gan .g-colrang a chur leis go sainráite.

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

Colúin agus bearnaí

Coigeartaigh líon na gcolún agus an bhearna.

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

Ag cur sraitheanna

Ag cur níos mó sraitheanna leis agus ag athrú socrúchán na gcolú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>

bearnaí

Athraigh na bearnaí ingearach ach amháin trí athrú a dhéanamh ar an row-gap. Tabhair faoi deara go n-úsáidimid gapar .grids, ach row-gapis column-gapféidir é a mhodhnú de réir mar is gá.

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

Mar gheall air sin, is féidir leat s ingearach agus cothrománacha éagsúla a bheith agat gap, ar féidir leo luach amháin (gach taobh) nó péire luachanna (ingearach agus cothrománach) a ghlacadh. Is féidir é seo a chur i bhfeidhm le stíl inlíne le haghaidh gap, nó lenár n- --bs-gapathróg CSS.

<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

Teorainn amháin ar an Eangach CSS ná go bhfuil ár ranganna réamhshocraithe fós á nginiúint ag dhá athróg Sass, $grid-columnsagus $grid-gutter-width. Cinneann sé seo go héifeachtach líon na ranganna a ghintear inár CSS tiomsaithe. Tá dhá rogha agat anseo:

• Athraigh na hathróga réamhshocraithe Sass sin agus déan do CSS a athchruthú.
• Bain úsáid as stíleanna inlíne nó saincheaptha chun cur leis na ranganna a chuirtear ar fáil.

Mar shampla, is féidir leat an comhaireamh colún a mhéadú agus méid na bearna a athrú, agus ansin do “cholúin” a mhéid le meascán de stíleanna inlíne agus ranganna colún Eangach CSS réamhshainithe (m.sh., .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>