CSS Sarea

Bootstrap-en sareta sistema lehenetsiak milioika pertsonek probatu eta probatutako CSS diseinu-tekniken hamarkada bat baino gehiagoren amaiera da. Baina, CSS Grid berria bezalako arakatzaileetan ikusten ari garen CSS ezaugarri eta teknika moderno askorik gabe ere sortu zen.

Nola dabil

Bootstrap 5-ekin, CSS Grid-en eraikitako sare-sistema bereizi bat gaitzeko aukera gehitu dugu, baina Bootstrap bira batekin. Diseinu sentikorrak eraikitzeko kapritxo batean aplika ditzakezun klaseak jasotzen dituzu oraindik, baina bestelako ikuspegi batekin.

• CSS Grid hautagarria da. Desgaitu sare-sistema lehenetsia ezarriz $enable-grid-classes: falseeta gaitu CSS Sarea ezarriz $enable-cssgrid: true. Ondoren, berriro konpilatu zure Sass.

• .rowOrdeztu ren instantziak .grid. Klaseak zure HTMLrekin eraikitzen duzun bat .gridezartzen display: grideta sortzen du .grid-template

• Ordeztu .col-*klaseak .g-col-*klaseekin. Hau da gure CSS Grid zutabeek grid-columnpropietatea erabiltzen dutelako width.

• Zutabeak eta erreten-tamainak CSS aldagaien bidez ezartzen dira. Ezarri hauek gurasoan .grideta pertsonalizatu nahi duzun moduan, lerroan edo estilo-orri batean, --bs-columnseta --bs-gap.

Etorkizunean, Bootstrap-ek soluzio hibrido batera aldatuko du, gapjabetzak flexbox-erako arakatzailearen laguntza ia osoa lortu baitu.

Funtsezko desberdintasunak

Sare-sistema lehenetsiarekin alderatuta:

• Flex utilitateek ez dute CSS Grid zutabeetan era berean eragiten.

• Hutsuneak erretenak ordezkatzen ditu. Propietateak gure sareta-sistema lehenetsiko gaphorizontala ordezkatzen du eta gehiago funtzionatzen du .paddingmargin

• Horrela, s-ek ez bezala .row, .grids-ek ez dute marjina negatiborik eta marjina-erabilgarritasunak ezin dira erabili sareko erretenak aldatzeko. Sare-hutsuneak horizontalki eta bertikalki aplikatzen dira lehenespenez. Ikusi pertsonalizazio atala xehetasun gehiago lortzeko.

• Inline eta pertsonalizatutako estiloak modifikatzaileen klaseen ordezko gisa ikusi behar dira (adibidez, style="--bs-columns: 3;"vs class="row-cols-3").

• Habiaratzeak antzera funtzionatzen du, baina baliteke zure zutabeen zenbaketak berrezartzea habiaratuta dagoen instantzia bakoitzean .grid. Ikus habiak atala xehetasunetarako.

Adibideak

Hiru zutabe

Ikuspegi eta gailu guztietan zabalera berdineko hiru zutabe sor daitezke .g-col-4klaseak erabiliz. Gehitu erantzun-klaseak diseinua bista-tamainaren arabera aldatzeko.

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

Erantzunkorra

Erabili responsive klaseak zure diseinua bistan zehar doitzeko. Hemen bi zutaberekin hasten gara bistaratze estuenetan, eta gero hiru zutabe izatera helduko gara bistaratze ertainetan eta goikoetan.

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

Konparatu bi zutabe-diseinu honekin bistaratze guztietan.

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

Biltzea

Sareko elementuak automatikoki itzultzen dira hurrengo lerrora horizontalki leku gehiagorik ez dagoenean. Kontuan izan gapsareko elementuen arteko hutsune horizontal eta bertikalei aplikatzen zaiela.

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

Hasten

Hasierako klaseek gure sareko desplazamendu-klase lehenetsiak ordezkatzea dute helburu, baina ez dira guztiz berdinak. CSS Grid-ek sare-txantiloi bat sortzen du arakatzaileei "zutabe honetan hasteko" eta "zutabe honetan bukatzeko" esaten dieten estiloen bidez. Propietate horiek grid-column-starteta grid-column-end. Hasierako klaseak laburrak dira lehenengoentzat. Parekatu zutabe klaseekin zutabeak behar duzun neurrian eta lerrokatzeko. Hasierako klaseak ordu honetan hasten dira propietate hauentzako balio baliogabea den 1bezala .0

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

Zutabe automatikoak

Saretako elementuetan klaserik ez dagoenean (a-ren berehalako seme-alabak .grid), sareko elementu bakoitza zutabe bateko tamaina izango da automatikoki.

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

Portaera hau sareko zutabeen klaseekin nahas daiteke.

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

Habia egitea

Gure sare-sistema lehenetsiaren antzera, gure CSS Grid- .gridak s-en habia erraza egiteko aukera ematen du. Hala ere, lehenetsiak ez bezala, sareta honek errenkadetan, zutabeetan eta hutsuneetan izandako aldaketak heredatzen ditu. Demagun beheko adibidea:

• Zutabe-kopuru lehenetsia gainidazten dugu CSS aldagai lokal batekin: --bs-columns: 3.
• Lehenengo zutabe automatikoan, zutabeen zenbaketa heredatzen da eta zutabe bakoitza erabilgarri dagoen zabaleraren herena da.
• Bigarren zutabe automatikoan, habiaratutako zutabeen zenbaketa .grid12ra berrezarri dugu (gure lehenetsia).
• Hirugarren zutabe automatikoak ez du habiaraturiko edukirik.

Praktikan, honek diseinu konplexuagoak eta pertsonalizatuagoak ahalbidetzen ditu gure sareta sistema lehenetsiarekin alderatuta.

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

Pertsonalizatzea

Pertsonalizatu zutabe kopurua, errenkada kopurua eta hutsuneen zabalera CSS aldagai lokalekin.

CSS aldagai hauek ez dute balio lehenetsirik; horren ordez, tokiko instantzia bat eman arte erabiltzen diren ordezko balioak aplikatzen dituzte . Esate baterako, var(--bs-rows, 1)gure CSS Grid errenkadetarako erabiltzen dugu, ez ikusiarena --bs-rowsegiten, hori oraindik inon ezarri ez delako. Behin, .gridinstantzia balio hori erabiliko du ordezko balioaren ordez 1.

Ez dago sareko klaserik

Berehalako seme-alaben elementuak .gridsareta-elementuak dira, beraz, tamaina izango dute .g-colklaserik esplizituki gehitu gabe.

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

Zutabeak eta hutsuneak

Doitu zutabe kopurua eta hutsunea.

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

Errenkadak gehitzea

Errenkada gehiago gehitzea eta zutabeen kokapena aldatzea:

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

Hutsuneak

Aldatu hutsune bertikalak soilik aldatuz row-gap. gapKontuan izan s -n erabiltzen dugula .grid, baina row-gapeta column-gapbehar bezala alda daitekeela.

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

Hori dela eta, s bertikal eta horizontal desberdinak izan gapditzakezu, balio bakarra (alde guztiak) edo pare bat (bertikala eta horizontala) har ditzaketenak. Hau lineako estilo batekin aplika daiteke gap, edo gure --bs-gapCSS aldagaiarekin.

<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

CSS Grid-aren muga bat da gure klase lehenetsiak oraindik bi Sass aldagaiek sortzen dituztela $grid-columnseta $grid-gutter-width. Honek gure CSS konpilatuan sortutako klase kopurua aldez aurretik zehazten du. Hemen bi aukera dituzu:

• Aldatu Sass aldagai lehenetsi horiek eta birkonpilatu CSS.
• Erabili lineako estiloak edo pertsonalizatuak emandako klaseak areagotzeko.

Esate baterako, zutabeen kopurua handitu eta hutsunearen tamaina alda dezakezu, eta, ondoren, zure "zutabeak" tamaina lerroko estiloen eta aurrez definitutako CSS Grid zutabe klaseen nahasketa batekin (adibidez, .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>