CSS grid

Sjálfgefið netkerfi Bootstrap táknar afrakstur yfir áratug af CSS útlitstækni, reynd og prófuð af milljónum manna. En það var líka búið til án margra nútíma CSS eiginleika og tækni sem við erum að sjá í vöfrum eins og nýja CSS Grid.

Hvernig það virkar

Með Bootstrap 5 höfum við bætt við möguleikanum á að virkja sérstakt netkerfi sem er byggt á CSS Grid, en með Bootstrap ívafi. Þú færð samt námskeið sem þú getur sótt um á duttlungi til að byggja upp móttækilegar skipulag, en með annarri nálgun undir hettunni.

• CSS Grid er opt-in. Slökktu á sjálfgefna töflukerfinu með því að stilla $enable-grid-classes: falseog virkjaðu CSS töfluna með því að stilla $enable-cssgrid: true. Settu síðan Sass þinn saman aftur.

• Skiptu um tilvik af .rowmeð .grid. Bekkurinn .gridsetur display: gridog býr til a grid-templatesem þú byggir á með HTML þínum.

• Skiptu út .col-*flokkum fyrir .g-col-*flokka. Þetta er vegna þess að CSS Grid dálkarnir okkar nota grid-columneignina í stað width.

• Dálkar og stærðir á þakrennum eru stilltar með CSS breytum. Stilltu þetta á foreldri .gridog sérsníddu hvernig sem þú vilt, inline eða í stílblaði, með --bs-columnsog --bs-gap.

Í framtíðinni mun Bootstrap líklega skipta yfir í blendingalausn þar sem gapeignin hefur náð næstum fullum vafrastuðningi fyrir flexbox.

Lykilmunur

Samanborið við sjálfgefið netkerfi:

• Flex tól hafa ekki áhrif á CSS Grid dálkana á sama hátt.

• Bil kemur í stað þakrenna. Eignin gapkemur í stað lárétts paddingfrá sjálfgefna netkerfi okkar og virkar meira eins og margin.

• Sem slík, ólíkt .rows, .gridhafa s enga neikvæða framlegð og ekki er hægt að nota framlegðarveitur til að breyta ristrennum. Ratbil er sjálfgefið beitt lárétt og lóðrétt. Sjá sérsniðna hlutann fyrir frekari upplýsingar.

• Skoða ætti innbyggða og sérsniðna stíla sem staðgengil fyrir breytingaflokka (td style="--bs-columns: 3;"vs class="row-cols-3").

• Hreiður virkar á svipaðan hátt, en gæti þurft að endurstilla dálkafjöldann fyrir hvert tilvik af hreiðri .grid. Sjá hreiðurhlutann fyrir nánari upplýsingar.

Dæmi

Þrír dálkar

Hægt er að búa til þrjá jafnbreiða dálka yfir öll útsýnisgáttir og tæki með því að nota .g-col-4flokkana. Bættu við móttækilegum flokkum til að breyta útlitinu eftir útsýnisstærð.

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

Móttækilegur

Notaðu móttækilega flokka til að stilla útlit þitt á milli útsýnisgátta. Hér byrjum við á tveimur dálkum á þröngustu útsýnisgluggunum og stækkum síðan í þrjár dálka á meðalstórum útsýnisgluggum og ofar.

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

Berðu það saman við þetta tveggja dálka skipulag á öllum útsýnisgáttum.

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

Umbúðir

Hlutir í hnitaneti fara sjálfkrafa yfir í næstu línu þegar ekki er meira pláss lárétt. Athugaðu að þetta á gapvið um lárétt og lóðrétt bil á milli ristaliða.

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

Byrjar

Byrjunarflokkar miða að því að koma í stað offsetflokka sjálfgefna netsins okkar, en þeir eru ekki alveg eins. CSS Grid býr til sniðmát fyrir töflu með stílum sem segja vöfrum að „byrja á þessum dálki“ og „enda á þessum dálki. Þær eignir eru grid-column-startog grid-column-end. Byrjunartímar eru stytting á þeim fyrrnefndu. Pörðu þá við dálkaflokkana að stærð og stilltu dálkana eins og þú þarft. Byrjunartímar byrja á 1eins og 0er ógilt gildi fyrir þessar eignir.

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

Sjálfvirkir dálkar

Þegar engir flokkar eru á ristliðunum (nástu börn a .grid), verður hver ristliður sjálfkrafa stærðaður í einn dálk.

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

Þessari hegðun er hægt að blanda saman við rist dálkaflokka.

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

Hreiður

Svipað og sjálfgefið ristkerfi okkar, gerir CSS Grid okkar kleift að hreipa .grids. Hins vegar, ólíkt sjálfgefnu, erfir þetta rist breytingar á línum, dálkum og eyðum. Skoðum dæmið hér að neðan:

• Við hnekkum sjálfgefnum fjölda dálka með staðbundinni CSS breytu: --bs-columns: 3.
• Í fyrsta sjálfvirka dálknum erfist dálkafjöldi og hver dálkur er þriðjungur af tiltækri breidd.
• Í öðrum sjálfvirkum dálki höfum við endurstillt dálkafjöldann á hreiðri .gridí 12 (sjálfgefið hjá okkur).
• Þriðji sjálfvirki dálkurinn hefur ekkert hreiður efni.

Í reynd gerir þetta ráð fyrir flóknari og sérsniðnari skipulagi í samanburði við sjálfgefið ristkerfi okkar.

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

Sérsníða

Sérsníddu fjölda dálka, fjölda raða og breidd bilanna með staðbundnum CSS breytum.

Þessar CSS breytur hafa ekkert sjálfgefið gildi; í staðinn nota þeir fallgildi sem eru notuð þar til staðbundið tilvik er gefið upp. Til dæmis notum við var(--bs-rows, 1)fyrir CSS Grid raðir okkar, sem hunsa --bs-rowsvegna þess að það hefur ekki verið stillt neins staðar ennþá. Þegar það er komið mun .gridtilvikið nota það gildi í stað varagildis 1.

Engir grid flokkar

Fyrstu börn þættir .grideru rist atriði, svo þeir verða stærð án þess að bæta sérstaklega við .g-colbekk.

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

Dálkar og eyður

Stilltu fjölda dálka og bilið.

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

Bætir við línum

Að bæta við fleiri línum og breyta staðsetningu dálka:

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

Eyður

Breyttu aðeins lóðréttu bilunum með því að breyta row-gap. Athugaðu að við notum gapá .grids, en row-gapog column-gaphægt er að breyta eftir þörfum.

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

Vegna þess geturðu haft mismunandi lóðrétt og lárétt gaps, sem geta tekið eitt gildi (allar hliðar) eða par af gildum (lóðrétt og lárétt). Þetta er hægt að nota með innbyggðum stíl fyrir gap, eða með --bs-gapCSS breytunni okkar.

<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

Ein takmörkun á CSS Grid er að sjálfgefnir flokkar okkar eru enn búnir til af tveimur Sass breytum $grid-columnsog $grid-gutter-width. Þetta fyrirframákveður í raun fjölda flokka sem myndast í samansettu CSS okkar. Þú hefur tvo valkosti hér:

• Breyttu þessum sjálfgefnum Sass breytum og settu saman CSS þinn aftur.
• Notaðu innbyggða eða sérsniðna stíla til að auka flokkana sem gefnir eru upp.

Til dæmis geturðu aukið dálkafjöldann og breytt bilstærðinni og síðan stærð „dálkana“ með blöndu af innbyggðum stílum og fyrirfram skilgreindum CSS Grid dálkaflokkum (td .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>