CSS Sarea
Ikasi CSS Grid-en eraikitako gure ordezko diseinu-sistema gaitu, erabili eta pertsonalizatzen adibideekin eta kode zatiekin.
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: false
eta gaitu CSS Sarea ezarriz$enable-cssgrid: true
. Ondoren, berriro konpilatu zure Sass. -
.row
Ordeztu ren instantziak.grid
. Klaseak zure HTMLrekin eraikitzen duzun bat.grid
ezartzendisplay: grid
eta sortzen du .grid-template
-
Ordeztu
.col-*
klaseak.g-col-*
klaseekin. Hau da gure CSS Grid zutabeekgrid-column
propietatea erabiltzen dutelakowidth
. -
Zutabeak eta erreten-tamainak CSS aldagaien bidez ezartzen dira. Ezarri hauek gurasoan
.grid
eta pertsonalizatu nahi duzun moduan, lerroan edo estilo-orri batean,--bs-columns
eta--bs-gap
.
Etorkizunean, Bootstrap-ek soluzio hibrido batera aldatuko du, gap
jabetzak 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
gap
horizontala ordezkatzen du eta gehiago funtzionatzen du .padding
margin
-
Horrela, s-ek ez bezala
.row
,.grid
s-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;"
vsclass="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-4
klaseak erabiliz. Gehitu erantzun-klaseak diseinua bista-tamainaren arabera aldatzeko.
<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>
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">
<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">
<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 gap
sareko elementuen arteko hutsune horizontal eta bertikalei aplikatzen zaiela.
<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>
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-start
eta 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 1
bezala .0
<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>
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">
<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">
<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- .grid
ak 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
.grid
12ra 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" 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.
Aldakorra | Atzerako balioa | Deskribapena |
---|---|---|
--bs-rows |
1 |
Zure sareta txantiloiaren errenkada kopurua |
--bs-columns |
12 |
Zure sareta txantiloiaren zutabe kopurua |
--bs-gap |
1.5rem |
Zutabeen arteko tartearen tamaina (bertikala eta horizontala) |
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-rows
egiten, hori oraindik inon ezarri ez delako. Behin, .grid
instantzia balio hori erabiliko du ordezko balioaren ordez 1
.
Ez dago sareko klaserik
Berehalako seme-alaben elementuak .grid
sareta-elementuak dira, beraz, tamaina izango dute .g-col
klaserik esplizituki gehitu gabe.
<div class="grid" 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" 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>
Errenkadak gehitzea
Errenkada gehiago gehitzea eta zutabeen kokapena aldatzea:
<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>
Hutsuneak
Aldatu hutsune bertikalak soilik aldatuz row-gap
. gap
Kontuan izan s -n erabiltzen dugula .grid
, baina row-gap
eta column-gap
behar bezala alda daitekeela.
<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>
Hori dela eta, s bertikal eta horizontal desberdinak izan gap
ditzakezu, balio bakarra (alde guztiak) edo pare bat (bertikala eta horizontala) har ditzaketenak. Hau lineako estilo batekin aplika daiteke gap
, edo gure --bs-gap
CSS aldagaiarekin.
<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
CSS Grid-aren muga bat da gure klase lehenetsiak oraindik bi Sass aldagaiek sortzen dituztela $grid-columns
eta $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" 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>