CSS-ruudukko
Opi ottamaan käyttöön, käyttämään ja mukauttamaan vaihtoehtoista asettelujärjestelmäämme, joka perustuu CSS-ruudukkoon esimerkkien ja koodinpätkien avulla.
Bootstrapin oletusruudukkojärjestelmä edustaa huipentumaa yli vuosikymmenen CSS-asettelutekniikoille, joita miljoonat ihmiset ovat kokeilleet ja testaaneet. Mutta se luotiin myös ilman monia moderneja CSS-ominaisuuksia ja -tekniikoita, joita näemme selaimissa, kuten uudessa CSS-ruudukossa.
Kuinka se toimii
Bootstrap 5:ssä olemme lisänneet mahdollisuuden ottaa käyttöön erillinen ruudukkojärjestelmä, joka on rakennettu CSS Gridille, mutta Bootstrap-kierteellä. Saat edelleen kursseja, joita voit hakea mielijohteesta ja rakentaa reagoivia asetteluja, mutta erilainen lähestymistapa konepellin alla.
-
CSS Grid on valinnainen. Poista oletusruudukkojärjestelmä käytöstä asettamalla
$enable-grid-classes: false
ja ota CSS Grid käyttöön asettamalla$enable-cssgrid: true
. Käännä sitten Sassi uudelleen. -
Korvaa esiintymät
.row
sanalla.grid
..grid
Luokka asettaadisplay: grid
ja luogrid-template
HTML-koodisi avulla . -
Korvaa
.col-*
luokat.g-col-*
luokilla. Tämä johtuu siitä, että CSS Grid -sarakkeissamme käytetäängrid-column
ominaisuuttawidth
. -
Sarakkeet ja kourujen koot asetetaan CSS-muuttujien avulla. Aseta nämä ylätason kohdalle
.grid
ja mukauta haluamallasi tavalla, rivissä tai tyylitaulukossa painikkeilla--bs-columns
ja--bs-gap
.
Tulevaisuudessa Bootstrap siirtyy todennäköisesti hybridiratkaisuun, koska gap
omaisuus on saavuttanut lähes täyden selaintuen flexboxille.
Keskeiset erot
Verrattuna oletusruudukkojärjestelmään:
-
Flex-apuohjelmat eivät vaikuta CSS Grid -sarakkeisiin samalla tavalla.
-
Välit korvaavat vesikourut. Ominaisuus
gap
korvaa vaakatasonpadding
oletusruudukkojärjestelmästämme ja toimii enemmän kuinmargin
. -
Sellaisenaan, toisin kuin
.row
s:llä,.grid
s:llä ei ole negatiivisia marginaaleja eikä marginaaliapuohjelmia voida käyttää ruudukon kourujen vaihtamiseen. Ristikkoraot asetetaan oletuksena vaaka- ja pystysuunnassa. Katso tarkemmat tiedot mukauttamisosiosta . -
Tekstin sisäisiä ja mukautettuja tyylejä tulee pitää muokkausluokkien (esim.
style="--bs-columns: 3;"
vs.class="row-cols-3"
) korvaavina. -
Sisäkkäisyys toimii samalla tavalla, mutta saattaa vaatia, että sinun on nollattava sarakemäärät jokaisessa sisäkkäisen esiintymän kohdalla
.grid
. Katso lisätiedot sisäkkäisistä osiosta .
Esimerkkejä
Kolme saraketta
.g-col-4
Luokkien avulla voidaan luoda kolme yhtä leveää saraketta kaikille näkymäporteille ja laitteille . Lisää reagoivia luokkia muuttaaksesi asettelua näkymän koon mukaan.
<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>
Responsiivinen
Käytä responsiivisia luokkia muokataksesi asetteluasi eri näkymäporteissa. Aloitamme kahdella sarakkeella kapeimmissa näkymäporteissa ja kasvamme sitten kolmeen sarakkeeseen keskikokoisissa ja sitä suuremmissa näkymäporteissa.
<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>
Vertaa sitä tähän kahden sarakkeen asetteluun kaikissa näkymäporteissa.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Kääriminen
Ruudukon kohteet rivittyvät automaattisesti seuraavalle riville, kun vaakasuunnassa ei ole enää tilaa. Huomaa, että gap
koskee vaaka- ja pystysuoria rakoja ruudukon kohteiden välillä.
<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>
Alkaa
Aloitusluokat pyrkivät korvaamaan oletusruudukon offset-luokat, mutta ne eivät ole täysin samoja. CSS Grid luo ruudukkomallin tyyleillä, jotka käskevät selaimia aloittamaan tästä sarakkeesta ja lopettamaan tähän sarakkeeseen. Nämä ominaisuudet ovat grid-column-start
ja grid-column-end
. Aloitusluokat ovat lyhennettä edellisestä. Yhdistä ne sarakeluokkien kanssa koon ja kohdista sarakkeet haluamallasi tavalla. Aloitusluokat alkavat arvosta, 1
joka 0
on virheellinen näille ominaisuuksille.
<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>
Automaattiset sarakkeet
Jos ruudukkokohdissa ei ole luokkia (a:n välittömät jälkeläiset .grid
), jokainen ruudukkokohde kootaan automaattisesti yhteen sarakkeeseen.
<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>
Tämä käyttäytyminen voidaan sekoittaa ruudukon sarakeluokkiin.
<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>
Pesivä
Kuten oletusruudukkojärjestelmämme, CSS Grid mahdollistaa .grid
s:n helpon sisäkkäisyyden. Toisin kuin oletusarvo, tämä ruudukko kuitenkin perii muutokset riveissä, sarakkeissa ja aukoissa. Harkitse alla olevaa esimerkkiä:
- Ohitamme sarakkeiden oletusmäärän paikallisella CSS-muuttujalla:
--bs-columns: 3
. - Ensimmäisessä automaattisessa sarakkeessa sarakkeiden määrä periytyy ja jokainen sarake on kolmasosa käytettävissä olevasta leveydestä.
- Toisessa automaattisessa sarakkeessa nollasimme sisäkkäisten sarakkeiden määrän
.grid
12:een (oletusarvomme). - Kolmannessa automaattisessa sarakkeessa ei ole sisäkkäistä sisältöä.
Käytännössä tämä mahdollistaa monimutkaisempia ja mukautettuja asetteluja verrattuna oletusruudukkojärjestelmäämme.
<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>
Mukauttaminen
Mukauta sarakkeiden lukumäärää, rivien määrää ja rakojen leveyttä paikallisilla CSS-muuttujilla.
Muuttuva | Vara-arvo | Kuvaus |
---|---|---|
--bs-rows |
1 |
Ruudukkomallisi rivien määrä |
--bs-columns |
12 |
Ruudukkomallisi sarakkeiden määrä |
--bs-gap |
1.5rem |
Sarakkeiden välisen raon koko (pysty ja vaaka) |
Näillä CSS-muuttujilla ei ole oletusarvoa; sen sijaan ne käyttävät vara-arvoja, joita käytetään, kunnes paikallinen esiintymä tarjotaan. Käytämme esimerkiksi var(--bs-rows, 1)
CSS Grid -rivejämme, joka jättää huomioimatta, --bs-rows
koska sitä ei ole vielä asetettu missään. Kun se on, .grid
ilmentymä käyttää tätä arvoa varaarvon sijasta 1
.
Ei ruudukkoluokkia
Välittömät alatason elementit .grid
ovat ruudukkokohteita, joten niiden koko määritetään ilman .g-col
luokan nimenomaista lisäämistä.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Sarakkeet ja aukot
Säädä sarakkeiden lukumäärää ja väliä.
<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>
Rivien lisääminen
Rivien lisääminen ja sarakkeiden sijoittelun muuttaminen:
<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>
aukkoja
Muuta pystysuuntaisia rakoja vain muokkaamalla row-gap
. Huomaa, että käytämme s: gap
ssä .grid
, mutta row-gap
ja column-gap
sitä voidaan muokata tarpeen mukaan.
<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>
Tästä johtuen sinulla voi olla erilaisia pysty- ja vaakasuuntaisia gap
s-arvoja, jotka voivat ottaa yhden arvon (kaikilta puolilta) tai arvoparin (pysty ja vaaka). Tätä voidaan soveltaa tekstin sisäänrakennetulla tyylillä gap
tai --bs-gap
CSS-muuttujallamme.
<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
Yksi CSS-ruudukon rajoituksista on se, että oletusluokat ovat edelleen kahden Sass-muuttujan $grid-columns
ja $grid-gutter-width
. Tämä määrittää tehokkaasti ennalta käännetyssä CSS:ssämme luotujen luokkien määrän. Sinulla on kaksi vaihtoehtoa tässä:
- Muokkaa näitä oletusarvoisia Sass-muuttujia ja käännä CSS uudelleen.
- Käytä sisäisiä tai mukautettuja tyylejä täydentääksesi tarjottuja luokkia.
Voit esimerkiksi lisätä sarakkeiden määrää ja muuttaa aukon kokoa ja sitten muuttaa "sarakkeiden" kokoa yhdistelmällä rivin tyylejä ja ennalta määritettyjä CSS-ruudukon sarakeluokkia (esim. .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>