CSS mriežka

Predvolený mriežkový systém Bootstrapu predstavuje vyvrcholenie viac ako desaťročí techník rozloženia CSS, ktoré vyskúšali a otestovali milióny ľudí. Bol však vytvorený aj bez mnohých moderných funkcií a techník CSS, ktoré vidíme v prehliadačoch, ako je nová mriežka CSS.

Ako to funguje

S Bootstrap 5 sme pridali možnosť povoliť samostatný mriežkový systém, ktorý je postavený na CSS Grid, ale s Bootstrap twistom. Stále máte kurzy, ktoré môžete z rozmaru použiť na vytváranie responzívnych rozložení, ale s iným prístupom pod kapotou.

• CSS Grid je voliteľná. Zakázať predvolený systém mriežky nastavením $enable-grid-classes: falsea povoliť mriežku CSS nastavením $enable-cssgrid: true. Potom znova skompilujte svoj Sass.

• Nahraďte výskyty .rowvýrazom .grid. Trieda .gridnastaví display: grida vytvorí prvok , na grid-templatektorom staviate pomocou kódu HTML.

• Nahradiť .col-*triedy .g-col-*triedami. Je to preto, že naše stĺpce CSS Grid používajú grid-columnvlastnosť namiesto width.

• Veľkosti stĺpcov a odkvapov sa nastavujú pomocou premenných CSS. Nastavte ich na rodiča .grida prispôsobte si ich, ako chcete, vložené alebo v šablóne so štýlmi pomocou --bs-columnsa --bs-gap.

V budúcnosti sa Bootstrap pravdepodobne presunie na hybridné riešenie, pretože táto gapvlastnosť dosiahla takmer plnú podporu prehliadača pre flexbox.

Kľúčové rozdiely

V porovnaní s predvoleným systémom mriežky:

• Pomôcky Flex neovplyvňujú stĺpce mriežky CSS rovnakým spôsobom.

• Medzery nahrádzajú odkvapy. Vlastnosť gapnahrádza horizontálu paddingz nášho predvoleného mriežkového systému a funguje skôr ako margin.

• Ako také, na rozdiel od .rows, .grids nemajú žiadne záporné okraje a na zmenu mriežkových žľabov nie je možné použiť nástroje pre okraje. Medzery mriežky sa štandardne aplikujú horizontálne a vertikálne. Ďalšie podrobnosti nájdete v časti prispôsobenia .

• Vložené a vlastné štýly by sa mali považovať za náhrady tried modifikátorov (napr. style="--bs-columns: 3;"vs class="row-cols-3").

• Vnorenie funguje podobne, ale môže vyžadovať, aby ste vynulovali počet stĺpcov pre každú inštanciu vnoreného súboru .grid. Podrobnosti nájdete v sekcii hniezdenia .

Príklady

Tri stĺpce

.g-col-4Pomocou tried možno vytvoriť tri stĺpce rovnakej šírky vo všetkých zobrazovacích poliach a zariadeniach . Pridajte responzívne triedy na zmenu rozloženia podľa veľkosti výrezu.

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

Responzívne

Pomocou responzívnych tried upravte rozloženie vo výrezoch. Tu začneme s dvoma stĺpcami na najužších výrezoch a potom sa rozrastieme na tri stĺpce na stredných výrezoch a vyššie.

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

Porovnajte to s týmto rozložením dvoch stĺpcov vo všetkých výrezoch.

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

Obal

Položky mriežky sa automaticky zalomia na ďalší riadok, keď už vodorovne nie je miesto. Všimnite si, že gapplatí pre horizontálne a vertikálne medzery medzi položkami mriežky.

<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

Počiatočné triedy majú za cieľ nahradiť triedy posunu našej predvolenej mriežky, ale nie sú úplne rovnaké. CSS Grid vytvára šablónu mriežky prostredníctvom štýlov, ktoré prehliadačom povedia, aby „začali v tomto stĺpci“ a „skončili v tomto stĺpci“. Tieto vlastnosti sú grid-column-starta grid-column-end. Počiatočné triedy sú skratkou pre prvé. Spárujte ich s triedami stĺpcov podľa veľkosti a zarovnajte stĺpce tak, ako potrebujete. Počiatočné triedy začínajú na 1as 0je neplatná hodnota pre tieto vlastnosti.

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

Automatické stĺpce

Ak v položkách mriežky nie sú žiadne triedy (bezprostredné potomky .grid), veľkosť každej položky mriežky sa automaticky nastaví na jeden stĺpec.

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

Toto správanie môže byť zmiešané s triedami stĺpcov mriežky.

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

Hniezdenie

Podobne ako náš predvolený mriežkový systém, naša mriežka CSS umožňuje jednoduché vkladanie .grids. Na rozdiel od predvoleného nastavenia však táto mriežka zdedí zmeny v riadkoch, stĺpcoch a medzerách. Zvážte príklad nižšie:

• Predvolený počet stĺpcov prepíšeme lokálnou premennou CSS: --bs-columns: 3.
• V prvom automatickom stĺpci sa počet stĺpcov zdedí a každý stĺpec predstavuje jednu tretinu dostupnej šírky.
• V druhom automatickom stĺpci sme resetovali počet stĺpcov vo vnorených stĺpcoch .gridna 12 (naše predvolené nastavenie).
• Tretí automatický stĺpec nemá žiadny vnorený obsah.

V praxi to umožňuje komplexnejšie a vlastné rozloženia v porovnaní s naším predvoleným systémom mriežky.

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

Prispôsobovanie

Prispôsobte počet stĺpcov, počet riadkov a šírku medzier pomocou miestnych premenných CSS.

Tieto premenné CSS nemajú žiadnu predvolenú hodnotu; namiesto toho aplikujú záložné hodnoty, ktoré sa používajú, kým nie je poskytnutá lokálna inštancia. Napríklad používame var(--bs-rows, 1)pre naše riadky CSS Grid, ktoré ignorujú --bs-rows, pretože to ešte nebolo nikde nastavené. Akonáhle je, .gridinštancia použije túto hodnotu namiesto záložnej hodnoty 1.

Žiadne triedy mriežky

Okamžité podradené prvky .gridsú položky mriežky, takže budú mať veľkosť bez explicitného pridania .g-coltriedy.

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

Stĺpce a medzery

Upravte počet stĺpcov a medzeru.

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

Pridávanie riadkov

Pridanie ďalších riadkov a zmena umiestnenia stĺpcov:

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

Medzery

Vertikálne medzery zmeňte iba úpravou row-gap. Všimnite si, že používame gapna .grids, ale row-gapa column-gapmožno ho podľa potreby upraviť.

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

Z tohto dôvodu môžete mať rôzne vertikálne a horizontálne gaps, ktoré môžu mať jednu hodnotu (všetky strany) alebo pár hodnôt (vertikálne a horizontálne). Dá sa to použiť s vloženým štýlom pre gap, alebo s našou --bs-gappremennou 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

Jedným z obmedzení CSS Grid je, že naše predvolené triedy sú stále generované dvoma premennými Sass $grid-columnsa $grid-gutter-width. To efektívne predurčuje počet tried generovaných v našom kompilovanom CSS. Tu máte dve možnosti:

• Upravte tieto predvolené premenné Sass a prekompilujte svoj CSS.
• Použite vložené alebo vlastné štýly na rozšírenie poskytnutých tried.

Môžete napríklad zvýšiť počet stĺpcov a zmeniť veľkosť medzier a potom upraviť veľkosť svojich „stĺpcov“ pomocou kombinácie vložených štýlov a preddefinovaných tried stĺpcov CSS Grid (napr. .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>