CSS-ruudukko

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

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

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

Vertaa sitä tähän kahden sarakkeen asetteluun kaikissa näkymäporteissa.

<div class="grid text-center">
  <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ä.

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

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.

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

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

Tämä käyttäytyminen voidaan sekoittaa ruudukon sarakeluokkiin.

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

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.

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

Mukauttaminen

Mukauta sarakkeiden lukumäärää, rivien määrää ja rakojen leveyttä paikallisilla CSS-muuttujilla.

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

<div class="grid text-center" 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 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>

Rivien lisääminen

Rivien lisääminen ja sarakkeiden sijoittelun muuttaminen:

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

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.

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

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.

<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

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

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