CSS tinklelis
Sužinokite, kaip įgalinti, naudoti ir tinkinti mūsų alternatyvią išdėstymo sistemą, sukurtą CSS tinkleliu su pavyzdžiais ir kodo fragmentais.
Numatytoji „Bootstrap“ tinklelio sistema yra daugiau nei dešimtmetį trukusių CSS išdėstymo metodų, kuriuos išbandė ir išbandė milijonai žmonių, kulminacija. Tačiau jis taip pat buvo sukurtas be daugelio šiuolaikinių CSS funkcijų ir metodų, kuriuos matome tokiose naršyklėse kaip naujasis CSS tinklelis.
Kaip tai veikia
Naudodami „Bootstrap 5“ pridėjome parinktį, leidžiančią įjungti atskirą tinklelio sistemą, sukurtą remiantis CSS tinkleliu, bet su „Bootstrap“ pasukimu. Vis tiek gausite užsiėmimų, kuriuose galite dalyvauti kurdami interaktyvius maketus, tačiau po gaubtu taikant kitokį požiūrį.
-
CSS tinklelis yra pasirenkamas. Išjunkite numatytąją tinklelio sistemą nustatydami
$enable-grid-classes: false
ir įjunkite CSS tinklelį nustatydami$enable-cssgrid: true
. Tada iš naujo sukompiliuokite savo Sass. -
Pakeiskite egzempliorius
.row
į.grid
..grid
Klasė nustatodisplay: grid
ir sukuriagrid-template
HTML, kuriuo remsitės . -
Pakeiskite
.col-*
klases.g-col-*
klasėmis. Taip yra todėl, kad mūsų CSS tinklelio stulpeliuose naudojamagrid-column
ypatybė, o newidth
. -
Stulpelių ir latakų dydžiai nustatomi naudojant CSS kintamuosius. Nustatykite juos pirminėje
.grid
ir tinkinkite kaip norite, įterptoje arba stiliaus lentelėje, naudodami--bs-columns
ir--bs-gap
.
Ateityje „Bootstrap“ greičiausiai pereis prie hibridinio sprendimo, nes gap
nuosavybė pasiekė beveik visą „flexbox“ naršyklės palaikymą.
Pagrindiniai skirtumai
Palyginti su numatyta tinklelio sistema:
-
„Flex“ priemonės CSS tinklelio stulpeliams nepaveikia vienodai.
-
Tarpai pakeičia latakus. Nuosavybė
gap
pakeičia horizontaliąpadding
iš numatytosios tinklelio sistemos ir veikia panašiai kaipmargin
. -
Iš esmės , skirtingai nei
.row
s,.grid
s neturi neigiamų paraščių ir tinklelio latakų keitimui negalima naudoti maržos paslaugų. Pagal numatytuosius nustatymus tinklelio tarpai taikomi horizontaliai ir vertikaliai. Daugiau informacijos rasite tinkinimo skyriuje . -
Įterptieji ir pasirinktiniai stiliai turėtų būti laikomi modifikatorių klasių pakaitalais (pvz.,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Įdėjimas veikia panašiai, tačiau gali reikėti iš naujo nustatyti kiekvieno įdėto egzemplioriaus stulpelių skaičių
.grid
. Norėdami gauti daugiau informacijos, žr .
Pavyzdžiai
Trys stulpeliai
.g-col-4
Naudojant klases galima sukurti tris vienodo pločio stulpelius visose peržiūros srityse ir įrenginiuose . Pridėkite interaktyvių klasių , kad pakeistumėte išdėstymą pagal peržiūros srities dydį.
<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>
Atsakingas
Naudokite interaktyvias klases, kad pritaikytumėte išdėstymą peržiūros srityse. Čia pradedame nuo dviejų stulpelių siauriausiose peržiūros srityse, o tada išaugame iki trijų stulpelių vidutinėse ir aukštesnėse peržiūros srityse.
<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>
Palyginkite tai su šiuo dviejų stulpelių išdėstymu visose peržiūros srityse.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Įvyniojimas
Tinklelio elementai automatiškai perkeliami į kitą eilutę, kai nebėra vietos horizontaliai. Atminkite, kad tai gap
taikoma horizontaliems ir vertikaliems tarpams tarp tinklelio elementų.
<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>
Prasideda
Pradinių klasių tikslas yra pakeisti numatytąsias tinklelio poslinkio klases, tačiau jos nėra visiškai vienodos. CSS tinklelis sukuria tinklelio šabloną naudodamas stilius, kurie nurodo naršyklėms „pradėti nuo šio stulpelio“ ir „baigti nuo šio stulpelio“. Tos savybės yra grid-column-start
ir grid-column-end
. Pradinės klasės yra trumpalaikiai pirmiesiems. Suporuokite juos su stulpelių klasėmis pagal dydį ir sulygiuokite stulpelius taip, kaip jums reikia. Pradžios klasės prasideda, 1
nes 0
yra netinkama šių ypatybių reikšmė.
<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>
Automatiniai stulpeliai
Kai tinklelio elementuose nėra klasių (tiesioginiai a .grid
antriniai elementai), kiekvienas tinklelio elementas bus automatiškai priskirtas vienam stulpeliui.
<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 elgesys gali būti derinamas su tinklelio stulpelių klasėmis.
<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>
Lizdas
Panašiai kaip mūsų numatytoji tinklelio sistema, mūsų CSS tinklelis leidžia lengvai įdėti .grid
s. Tačiau, skirtingai nei numatytasis, šis tinklelis paveldi eilučių, stulpelių ir tarpų pakeitimus. Apsvarstykite toliau pateiktą pavyzdį:
- Pakeičiame numatytąjį stulpelių skaičių vietiniu CSS kintamuoju:
--bs-columns: 3
. - Pirmajame automatiniame stulpelyje stulpelių skaičius yra paveldimas ir kiekvienas stulpelis yra trečdalis galimo pločio.
- Antrame automatiniame stulpelyje iš naujo nustatėme įdėtųjų stulpelių skaičių
.grid
iki 12 (numatytasis). - Trečiame automatiniame stulpelyje nėra įdėto turinio.
Praktiškai tai leidžia sukurti sudėtingesnius ir pasirinktinius išdėstymus, palyginti su mūsų numatytaja tinklelio sistema.
<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>
Tinkinimas
Tinkinkite stulpelių skaičių, eilučių skaičių ir tarpų plotį naudodami vietinius CSS kintamuosius.
Kintamasis | Atsarginė vertė | apibūdinimas |
---|---|---|
--bs-rows |
1 |
Eilučių skaičius tinklelio šablone |
--bs-columns |
12 |
Stulpelių skaičius tinklelio šablone |
--bs-gap |
1.5rem |
Tarpo tarp stulpelių dydis (vertikalus ir horizontalus) |
Šie CSS kintamieji neturi numatytosios reikšmės; vietoj to jie taiko atsargines vertes, kurios naudojamos tol , kol nepateikiamas vietinis egzempliorius. Pavyzdžiui, mes naudojame var(--bs-rows, 1)
savo CSS Grid eilutes, kurios nepaiso, --bs-rows
nes dar niekur nenustatyta. Kai tai bus padaryta, .grid
egzempliorius naudos tą reikšmę, o ne atsarginę reikšmę 1
.
Nėra tinklelio klasių
Tiesioginiai antriniai elementai .grid
yra tinklelio elementai, todėl jų dydis bus nustatomas aiškiai nepridedant .g-col
klasės.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Stulpeliai ir tarpai
Sureguliuokite stulpelių skaičių ir tarpą.
<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>
Eilučių pridėjimas
Pridėti daugiau eilučių ir pakeisti stulpelių vietą:
<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>
Tarpai
Vertikalius tarpus pakeiskite tik modifikuodami row-gap
. Atkreipkite dėmesį, kad mes naudojame gap
s .grid
, bet row-gap
ir column-gap
gali būti modifikuojami, jei reikia.
<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>
Dėl to galite turėti skirtingus vertikalius ir horizontalius gap
s, kurie gali turėti vieną reikšmę (visose pusėse) arba reikšmių porą (vertikalią ir horizontalią). Tai gali būti taikoma naudojant eilutinį stilių gap
arba su mūsų --bs-gap
CSS kintamuoju.
<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
Vienas iš CSS tinklelio apribojimų yra tas, kad mūsų numatytosios klasės vis tiek generuojamos dviem Sass kintamaisiais $grid-columns
ir $grid-gutter-width
. Tai veiksmingai iš anksto nustato klasių, sugeneruotų mūsų sudarytame CSS, skaičių. Čia turite dvi parinktis:
- Pakeiskite šiuos numatytuosius Sass kintamuosius ir iš naujo sukompiliuokite savo CSS.
- Naudokite įterptuosius arba pasirinktinius stilius, kad papildytumėte pateiktas klases.
Pavyzdžiui, galite padidinti stulpelių skaičių ir pakeisti tarpo dydį, o tada pakeisti savo „stulpelių“ dydį naudodami įterptųjų stilių ir iš anksto nustatytų CSS tinklelio stulpelių klasių derinį (pvz., .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>