CSS mřížka

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: falsea povolit mřížku CSS nastavením $enable-cssgrid: true. Poté znovu zkompilujte svůj Sass.

• Nahraďte instance .rowvýrazu .grid. Třída .gridnastaví display: grida vytvoří soubor grid-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-columnvlastnost místo width.

• Velikosti sloupců a mezer se nastavují pomocí proměnných CSS. Nastavte je na nadřazeném .grida upravte, jak chcete, vložené nebo v šabloně stylů pomocí --bs-columnsa --bs-gap.

V budoucnu se Bootstrap pravděpodobně přesune na hybridní řešení, protože tato gapvlastnost 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 gapnahrazuje vodorovnou paddingz našeho výchozího systému mřížky a funguje spíše jako margin.

• Jako takové, na rozdíl od .rows, .grids 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;"vs class="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-4Pomocí 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 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>

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

Porovnejte to s tímto rozložením dvou sloupců ve všech výřezech.

<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 mřížky se automaticky zalomí na další řádek, když už vodorovně nezbývá místo. Všimněte si, že gapplatí pro horizontální a vertikální mezery mezi položkami mříž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čí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-starta 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 1as 0je neplatná hodnota pro tyto 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é 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 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 chování lze kombinovat s třídami sloupců mříž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>

Hnízdění

Podobně jako náš výchozí mřížkový systém umožňuje naše mřížka CSS snadné vnořování .grids. 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 .gridna 12 (naše výchozí nastavení).
• 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 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>

Přizpůsobení

Upravte počet sloupců, počet řádků a šířku mezer pomocí místních proměnných CSS.

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, .gridinstance použije tuto hodnotu místo záložní hodnoty 1.

Žádné třídy mřížky

Okamžité podřízené prvky .gridjsou položky mřížky, takže budou mít velikost bez explicitního přidání .g-coltřídy.

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

Přidávání řádků

Přidání dalších řádků a změna umístění sloupců:

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

Mezery

Změňte svislé mezery pouze úpravou row-gap. Všimněte si, že používáme gapna .grids, ale row-gapa column-gaplze upravit podle potřeby.

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

Kvůli tomu můžete mít různá vertikální a horizontální gaps, 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-gapproměnnou 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 omezením CSS Grid je, že naše výchozí třídy jsou stále generovány dvěma proměnnými Sass $grid-columnsa $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 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>