Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

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.

Huomio – CSS Grid -järjestelmämme on kokeellinen ja mukana versiosta 5.1.0 alkaen! Lisäsimme sen dokumentaatiomme CSS:ään esitelläksemme sen sinulle, mutta se on oletuksena poistettu käytöstä. Jatka lukemista oppiaksesi ottamaan sen käyttöön projekteissasi.

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: falseja ota CSS Grid käyttöön asettamalla $enable-cssgrid: true. Käännä sitten Sassi uudelleen.

  • Korvaa esiintymät .rowsanalla .grid. .gridLuokka asettaa display: gridja luo grid-templateHTML-koodisi avulla .

  • Korvaa .col-*luokat .g-col-*luokilla. Tämä johtuu siitä, että CSS Grid -sarakkeissamme käytetään grid-columnominaisuutta width.

  • Sarakkeet ja kourujen koot asetetaan CSS-muuttujien avulla. Aseta nämä ylätason kohdalle .gridja mukauta haluamallasi tavalla, rivissä tai tyylitaulukossa painikkeilla --bs-columnsja --bs-gap.

Tulevaisuudessa Bootstrap siirtyy todennäköisesti hybridiratkaisuun, koska gapomaisuus 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 gapkorvaa vaakatason paddingoletusruudukkojärjestelmästämme ja toimii enemmän kuin margin.

  • Sellaisenaan, toisin kuin .rows:llä, .grids: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-4Luokkien avulla voidaan luoda kolme yhtä leveää saraketta kaikille näkymäporteille ja laitteille . Lisää reagoivia luokkia muuttaaksesi asettelua näkymän koon mukaan.

.g-col-4
.g-col-4
.g-col-4
<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.

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
<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.

.g-col-6
.g-col-6
<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ä gapkoskee vaaka- ja pystysuoria rakoja ruudukon kohteiden välillä.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
<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-startja grid-column-end. Aloitusluokat ovat lyhennettä edellisestä. Yhdistä ne sarakeluokkien kanssa koon ja kohdista sarakkeet haluamallasi tavalla. Aloitusluokat alkavat arvosta, 1joka 0on virheellinen näille ominaisuuksille.

.g-col-3 .g-start-2
.g-col-4 .g-start-6
<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.

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

.g-col-6
1
1
1
1
1
1
<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 .grids: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 .grid12: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.

Ensimmäinen automaattinen sarake
Automaattinen sarake
Automaattinen sarake
Toinen automaattinen sarake
6/12
4/12
2/12
Kolmas automaattinen sarake
<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-rowskoska sitä ei ole vielä asetettu missään. Kun se on, .gridilmentymä käyttää tätä arvoa varaarvon sijasta 1.

Ei ruudukkoluokkia

Välittömät alatason elementit .gridovat ruudukkokohteita, joten niiden koko määritetään ilman .g-colluokan nimenomaista lisäämistä.

Automaattinen sarake
Automaattinen sarake
Automaattinen sarake
<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ä.

.g-col-2
.g-col-2
<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>
.g-col-6
.g-col-4
<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:

Automaattinen sarake
Automaattinen sarake
Automaattinen sarake
<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: gapssä .grid, mutta row-gapja column-gapsitä voidaan muokata tarpeen mukaan.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
<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ä gaptai --bs-gapCSS-muuttujallamme.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
<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-columnsja $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).

14 saraketta
.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>