CSS mriežka
Zistite, ako povoliť, používať a prispôsobovať náš systém alternatívneho rozloženia postavený na mriežke CSS pomocou príkladov a útržkov kódu.
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: false
a povoliť mriežku CSS nastavením$enable-cssgrid: true
. Potom znova skompilujte svoj Sass. -
Nahraďte výskyty
.row
výrazom.grid
. Trieda.grid
nastavídisplay: grid
a vytvorí prvok , nagrid-template
ktorom staviate pomocou kódu HTML. -
Nahradiť
.col-*
triedy.g-col-*
triedami. Je to preto, že naše stĺpce CSS Grid používajúgrid-column
vlastnosť namiestowidth
. -
Veľkosti stĺpcov a odkvapov sa nastavujú pomocou premenných CSS. Nastavte ich na rodiča
.grid
a prispôsobte si ich, ako chcete, vložené alebo v šablóne so štýlmi pomocou--bs-columns
a--bs-gap
.
V budúcnosti sa Bootstrap pravdepodobne presunie na hybridné riešenie, pretože táto gap
vlastnosť 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ť
gap
nahrádza horizontálupadding
z nášho predvoleného mriežkového systému a funguje skôr akomargin
. -
Ako také, na rozdiel od
.row
s,.grid
s 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;"
vsclass="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-4
Pomocou 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">
<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">
<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">
<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 gap
platí pre horizontálne a vertikálne medzery medzi položkami mriežky.
<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>
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-start
a 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 1
as 0
je neplatná hodnota pre tieto vlastnosti.
<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>
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">
<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">
<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 .grid
s. 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
.grid
na 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" 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.
Variabilné | Záložná hodnota | Popis |
---|---|---|
--bs-rows |
1 |
Počet riadkov vo vašej šablóne mriežky |
--bs-columns |
12 |
Počet stĺpcov vo vašej šablóne mriežky |
--bs-gap |
1.5rem |
Veľkosť medzery medzi stĺpmi (vertikálne a horizontálne) |
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, .grid
inštancia použije túto hodnotu namiesto záložnej hodnoty 1
.
Žiadne triedy mriežky
Okamžité podradené prvky .grid
sú položky mriežky, takže budú mať veľkosť bez explicitného pridania .g-col
triedy.
<div class="grid" 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" 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>
Pridávanie riadkov
Pridanie ďalších riadkov a zmena umiestnenia stĺpcov:
<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>
Medzery
Vertikálne medzery zmeňte iba úpravou row-gap
. Všimnite si, že používame gap
na .grid
s, ale row-gap
a column-gap
možno ho podľa potreby upraviť.
<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>
Z tohto dôvodu môžete mať rôzne vertikálne a horizontálne gap
s, 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-gap
premennou CSS.
<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
Jedným z obmedzení CSS Grid je, že naše predvolené triedy sú stále generované dvoma premennými Sass $grid-columns
a $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" 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>