CSS mřížka
Naučte se pomocí příkladů a úryvků kódu povolit, používat a přizpůsobovat náš alternativní systém rozvržení postavený na mřížce CSS.
Výchozí mřížkový systém Bootstrapu představuje vyvrcholení více než desetiletí technik rozvržení CSS, které byly vyzkoušeny a testovány miliony lidí. Byl však také vytvořen bez mnoha moderních funkcí a technik CSS, které vidíme v prohlížečích, jako je nový CSS Grid.
Jak to funguje
S Bootstrap 5 jsme přidali možnost povolit samostatný mřížkový systém, který je postaven na CSS Grid, ale s Bootstrap twistem. Stále získáváte kurzy, které můžete z rozmaru použít k vytváření responzivních rozvržení, ale s jiným přístupem pod kapotou.
-
CSS Grid je volitelný. Zakázat výchozí systém mřížky nastavením
$enable-grid-classes: false
a povolit mřížku CSS nastavením$enable-cssgrid: true
. Poté znovu zkompilujte svůj Sass. -
Nahraďte instance
.row
výrazu.grid
. Třída.grid
nastavídisplay: grid
a vytvoří souborgrid-template
, na kterém stavíte pomocí svého HTML. -
Nahradit
.col-*
třídy.g-col-*
třídami. Je to proto, že naše sloupce CSS Grid používajígrid-column
vlastnost místowidth
. -
Velikosti sloupců a mezer se nastavují pomocí proměnných CSS. Nastavte je na nadřazeném
.grid
a upravte, jak chcete, vložené nebo v šabloně stylů pomocí--bs-columns
a--bs-gap
.
V budoucnu se Bootstrap pravděpodobně přesune na hybridní řešení, protože tato gap
vlastnost dosáhla téměř plné podpory prohlížeče pro flexbox.
Klíčové rozdíly
V porovnání s výchozím systémem mřížky:
-
Nástroje Flex neovlivňují sloupce mřížky CSS stejným způsobem.
-
Mezery nahrazují okapy. Vlastnost
gap
nahrazuje vodorovnoupadding
z našeho výchozího systému mřížky a funguje spíše jakomargin
. -
Jako takové, na rozdíl od
.row
s,.grid
s nemají žádné záporné okraje a nástroje pro okraje nelze použít ke změně okapů mřížky. Mezery mřížky jsou standardně aplikovány vodorovně a svisle. Další podrobnosti najdete v sekci přizpůsobení . -
Vložené a vlastní styly by měly být chápány jako náhrady tříd modifikátorů (např.
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Vnořování funguje podobně, ale může vyžadovat resetování počtu sloupců pro každou instanci vnořeného
.grid
. Podrobnosti najdete v sekci hnízdění .
Příklady
Tři sloupce
.g-col-4
Pomocí tříd lze vytvořit tři sloupce o stejné šířce napříč všemi výřezy a zařízeními . Chcete-li změnit rozložení podle velikosti výřezu, přidejte responzivní třídy .
<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>
Responzivní
Pomocí responzivních tříd upravte rozvržení napříč výřezy. Zde začneme se dvěma sloupci na nejužších výřezech a poté se rozrosteme na tři sloupce na středních výřezech a výše.
<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>
Porovnejte to s tímto rozložením dvou sloupců ve všech výřezech.
<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 mřížky se automaticky zalomí na další řádek, když už vodorovně nezbývá místo. Všimněte si, že gap
platí pro horizontální a vertikální mezery mezi položkami mříž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číná
Třídy Start mají za cíl nahradit třídy posunu naší výchozí mřížky, ale nejsou úplně stejné. CSS Grid vytváří šablonu mřížky prostřednictvím stylů, které prohlížečům říkají, že „začít v tomto sloupci“ a „skončit v tomto sloupci“. Tyto vlastnosti jsou grid-column-start
a grid-column-end
. Počáteční třídy jsou zkratkou pro první. Spárujte je s třídami sloupců podle velikosti a zarovnejte sloupce, jak potřebujete. Počáteční třídy začínají na 1
as 0
je neplatná hodnota pro tyto 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é sloupce
Pokud v položkách mřížky nejsou žádné třídy (bezprostřední potomci .grid
), každá položka mřížky bude automaticky dimenzována na jeden sloupec.
<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 chování lze kombinovat s třídami sloupců mříž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>
Hnízdění
Podobně jako náš výchozí mřížkový systém umožňuje naše mřížka CSS snadné vnořování .grid
s. Na rozdíl od výchozího nastavení však tato mřížka přebírá změny v řádcích, sloupcích a mezerách. Zvažte příklad níže:
- Výchozí počet sloupců přepíšeme lokální proměnnou CSS:
--bs-columns: 3
. - V prvním automatickém sloupci je počet sloupců zděděn a každý sloupec má jednu třetinu dostupné šířky.
- Ve druhém automatickém sloupci jsme resetovali počet sloupců u vnořených položek
.grid
na 12 (naše výchozí). - Třetí automatický sloupec nemá žádný vnořený obsah.
V praxi to umožňuje složitější a vlastní rozvržení ve srovnání s naším výchozím mřížkovým systémem.
<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>
Přizpůsobení
Upravte počet sloupců, počet řádků a šířku mezer pomocí místních proměnných CSS.
Variabilní | Záložní hodnota | Popis |
---|---|---|
--bs-rows |
1 |
Počet řádků v šabloně mřížky |
--bs-columns |
12 |
Počet sloupců v šabloně mřížky |
--bs-gap |
1.5rem |
Velikost mezery mezi sloupci (vertikální a horizontální) |
Tyto proměnné CSS nemají žádnou výchozí hodnotu; místo toho použijí záložní hodnoty, které se používají, dokud není poskytnuta místní instance. Například používáme var(--bs-rows, 1)
pro naše řádky CSS Grid, které ignoruje --bs-rows
, protože to ještě nebylo nikde nastaveno. Jakmile bude, .grid
instance použije tuto hodnotu místo záložní hodnoty 1
.
Žádné třídy mřížky
Okamžité podřízené prvky .grid
jsou položky mřížky, takže budou mít velikost bez explicitního přidání .g-col
třídy.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Sloupce a mezery
Upravte počet sloupců a mezeru.
<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>
Přidávání řádků
Přidání dalších řádků a změna umístění sloupců:
<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>
Mezery
Změňte svislé mezery pouze úpravou row-gap
. Všimněte si, že používáme gap
na .grid
s, ale row-gap
a column-gap
lze upravit podle potřeby.
<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>
Kvůli tomu můžete mít různá vertikální a horizontální gap
s, která mohou mít jednu hodnotu (všechny strany) nebo dvojici hodnot (vertikální a horizontální). To lze použít s vloženým stylem pro gap
, nebo s naší --bs-gap
proměnnou 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 omezením CSS Grid je, že naše výchozí třídy jsou stále generovány dvěma proměnnými Sass $grid-columns
a $grid-gutter-width
. To efektivně předurčuje počet tříd generovaných v našem kompilovaném CSS. Zde máte dvě možnosti:
- Upravte tyto výchozí proměnné Sass a znovu zkompilujte svůj CSS.
- K rozšíření poskytovaných tříd použijte vložené nebo vlastní styly.
Můžete například zvýšit počet sloupců a změnit velikost mezery a poté upravit velikost svých „sloupců“ pomocí kombinace vkládaných stylů a předdefinovaných tříd sloupců CSS Grid (např. .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>