Mreža CSS

Bootstrapov privzeti mrežni sistem predstavlja vrhunec več kot desetletja tehnik postavitve CSS, ki so jih preizkusili in preizkusili milijoni ljudi. Vendar pa je bil ustvarjen tudi brez številnih sodobnih funkcij in tehnik CSS, ki jih vidimo v brskalnikih, kot je nova mreža CSS.

Kako deluje

Z Bootstrap 5 smo dodali možnost za omogočanje ločenega mrežnega sistema, ki je zgrajen na CSS Grid, vendar z zasukom Bootstrap. Še vedno dobite tečaje, ki jih lahko uporabite za ustvarjanje odzivnih postavitev, vendar z drugačnim pristopom pod pokrovom.

• CSS Grid je opt-in. Onemogočite privzeti mrežni sistem z nastavitvijo $enable-grid-classes: falsein omogočite mrežo CSS z nastavitvijo $enable-cssgrid: true. Nato znova prevedite svoj Sass.

• Zamenjajte primerke .rowz .grid. Razred .gridnastavi display: gridin ​​ustvari, na grid-templatekaterem gradite s svojim HTML-jem.

• Zamenjajte .col-*razrede z .g-col-*razredi. To je zato, ker naši stolpci mreže CSS uporabljajo grid-columnlastnost namesto width.

• Velikosti stolpcev in žlebov se nastavijo s spremenljivkami CSS. Nastavite jih na nadrejeni .gridin prilagodite, kakor želite, v vrstici ali v slogovni tabeli, z --bs-columnsin --bs-gap.

V prihodnosti se bo Bootstrap verjetno preusmeril na hibridno rešitev, saj je gaplastnost dosegla skoraj popolno podporo brskalnika za flexbox.

Ključne razlike

V primerjavi s privzetim mrežnim sistemom:

• Pripomočki Flex ne vplivajo na stolpce CSS Grid na enak način.

• Vrzeli nadomeščajo žlebove. Lastnost gapnadomešča vodoravno paddingiz našega privzetega mrežnega sistema in deluje bolj kot margin.

• Kot tak, za razliko od .rows, .grids nima negativnih robov in pripomočkov za rob ni mogoče uporabiti za spreminjanje žlebov mreže. Mrežne vrzeli so privzeto uporabljene vodoravno in navpično. Za več podrobnosti glejte razdelek o prilagajanju .

• Sloge v vrstici in sloge po meri je treba obravnavati kot zamenjavo za razrede modifikatorjev (npr. style="--bs-columns: 3;"vs. class="row-cols-3").

• Gnezdenje deluje podobno, vendar boste morda morali ponastaviti štetje stolpcev za vsak primerek ugnezdenega .grid. Za podrobnosti si oglejte razdelek o gnezdenju .

Primeri

Trije stolpci

.g-col-4Z uporabo razredov je mogoče ustvariti tri enako široke stolpce v vseh pogledih in napravah . Dodajte odzivne razrede , da spremenite postavitev glede na velikost vidnega polja.

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

Odzivna

Uporabite odzivne razrede, da prilagodite svojo postavitev v pogledih. Tukaj začnemo z dvema stolpcema na najožjih vidnih oknih, nato pa povečamo na tri stolpce na srednjih vidnih oknih in višje.

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

Primerjajte to s to postavitvijo dveh stolpcev na vseh pogledih.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Zavijanje

Elementi mreže se samodejno prelomijo v naslednjo vrstico, ko vodoravno ni več prostora. Upoštevajte, da gapvelja za vodoravne in navpične vrzeli med elementi mreže.

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

Začne

Namen začetnih razredov je nadomestiti razrede odmikov naše privzete mreže, vendar niso povsem enaki. CSS Grid ustvari mrežno predlogo prek slogov, ki brskalnikom sporočajo, naj se »začnejo pri tem stolpcu« in »končajo pri tem stolpcu«. Te lastnosti so grid-column-startin grid-column-end. Začetni razredi so okrajšava za prvo. Združite jih z razredi stolpcev, da določite velikost in poravnate svoje stolpce, kakor želite. Začetek razredov se začne pri 1as 0je neveljavna vrednost za te lastnosti.

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

Samodejni stolpci

Če na mrežnih postavkah (neposrednih podrejenih elementih) ni razredov .grid, bo vsaka mrežna postavka samodejno prilagojena velikosti enega stolpca.

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

To vedenje je mogoče mešati z razredi stolpcev mreže.

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

Gnezdenje

Podobno kot naš privzeti mrežni sistem tudi naš CSS Grid omogoča enostavno gnezdenje .grids. Vendar pa ta mreža za razliko od privzete podeduje spremembe v vrsticah, stolpcih in vrzeli. Razmislite o spodnjem primeru:

• Privzeto število stolpcev preglasimo z lokalno spremenljivko CSS: --bs-columns: 3.
• V prvem samodejnem stolpcu je število stolpcev podedovano in vsak stolpec ima eno tretjino razpoložljive širine.
• V drugem samodejnem stolpcu smo ponastavili število stolpcev v ugnezdenih .gridna 12 (naša privzeta vrednost).
• Tretji samodejni stolpec nima ugnezdene vsebine.

V praksi to omogoča bolj zapletene in prilagojene postavitve v primerjavi z našim privzetim mrežnim sistemom.

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

Prilagajanje

Prilagodite število stolpcev, število vrstic in širino vrzeli z lokalnimi spremenljivkami CSS.

Te spremenljivke CSS nimajo privzete vrednosti; namesto tega uporabijo nadomestne vrednosti, ki se uporabljajo, dokler ni na voljo lokalni primerek. Na primer, uporabljamo var(--bs-rows, 1)za naše vrstice CSS Grid, ki jih prezre, --bs-rowsker še niso bile nikjer nastavljene. Ko je, bo .gridprimerek uporabil to vrednost namesto nadomestne vrednosti 1.

Brez mrežnih razredov

Neposredni podrejeni elementi .gridso elementi mreže, zato se jim bo velikost določila brez izrecnega dodajanja .g-colrazreda.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Stolpci in vrzeli

Prilagodite število stolpcev in razmik.

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

Dodajanje vrstic

Dodajanje več vrstic in spreminjanje postavitve stolpcev:

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

Vrzeli

Spremenite navpične vrzeli samo tako, da spremenite row-gap. Upoštevajte, da uporabljamo gapna .grids, vendar row-gapin column-gapju lahko po potrebi spremenimo.

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

Zaradi tega lahko imate različne navpične in vodoravne gaps, ki lahko sprejmejo eno vrednost (vse strani) ali par vrednosti (navpično in vodoravno). To lahko uporabite z vgrajenim slogom za gapali z našo --bs-gapspremenljivko CSS.

<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

Ena od omejitev mreže CSS je, da naše privzete razrede še vedno generirata dve spremenljivki Sass $grid-columnsin $grid-gutter-width. To dejansko vnaprej določa število razredov, ustvarjenih v našem prevedenem CSS. Tukaj imate dve možnosti:

• Spremenite te privzete spremenljivke Sass in znova prevedite svoj CSS.
• Uporabite vgrajene sloge ali sloge po meri, da razširite ponujene razrede.

Na primer, lahko povečate število stolpcev in spremenite velikost vrzeli, nato pa prilagodite svoje »stolpce« z mešanico vgrajenih slogov in vnaprej določenih razredov stolpcev mreže CSS (npr. .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>