CSS-Raster

Das Standardrastersystem von Bootstrap stellt den Höhepunkt von über einem Jahrzehnt CSS-Layouttechniken dar, die von Millionen von Menschen erprobt und getestet wurden. Aber es wurde auch ohne viele der modernen CSS-Funktionen und -Techniken erstellt, die wir in Browsern wie dem neuen CSS Grid sehen.

Wie es funktioniert

Mit Bootstrap 5 haben wir die Option hinzugefügt, ein separates Grid-System zu aktivieren, das auf CSS Grid aufbaut, aber mit einem Bootstrap-Twist. Sie erhalten immer noch Klassen, die Sie nach Lust und Laune anwenden können, um ansprechende Layouts zu erstellen, aber mit einem anderen Ansatz unter der Haube.

• CSS Grid ist optional. Deaktivieren Sie das Standardrastersystem durch Einstellung $enable-grid-classes: falseund aktivieren Sie das CSS-Raster durch Einstellung $enable-cssgrid: true. Kompilieren Sie dann Ihre Sass neu.

• Ersetzen Sie Instanzen von .rowdurch .grid. Die .gridKlasse setzt display: gridund erstellt eine grid-template, auf der Sie mit Ihrem HTML aufbauen.

• .col-*Klassen durch Klassen ersetzen .g-col-*. Dies liegt daran, dass unsere CSS-Grid-Spalten die grid-columnEigenschaft anstelle von verwenden width.

• Spalten- und Bundsteggrößen werden über CSS-Variablen gesetzt. Legen Sie diese auf dem übergeordneten Element fest .gridund passen Sie sie nach Belieben an, inline oder in einem Stylesheet, mit --bs-columnsund --bs-gap.

In Zukunft wird Bootstrap wahrscheinlich zu einer Hybridlösung wechseln, da die gapEigenschaft fast vollständige Browserunterstützung für Flexbox erreicht hat.

Hauptunterschiede

Im Vergleich zum Standardrastersystem:

• Flex-Dienstprogramme wirken sich nicht auf die gleiche Weise auf die CSS-Rasterspalten aus.

• Lücken ersetzen Dachrinnen. Die gapEigenschaft ersetzt die Horizontale paddingaus unserem Standardrastersystem und funktioniert eher wie margin.

• Daher haben s im Gegensatz zu .rows .gridkeine negativen Margen, und Margin-Utilities können nicht verwendet werden, um die Rasterrinnen zu ändern. Gitterlücken werden standardmäßig horizontal und vertikal angewendet. Sehen Sie den besonders anfertigenden Abschnitt für weitere Details.

• Inline- und benutzerdefinierte Stile sollten als Ersatz für Modifikatorklassen (z . B. style="--bs-columns: 3;"vs class="row-cols-3") betrachtet werden.

• Die Verschachtelung funktioniert ähnlich, erfordert jedoch möglicherweise, dass Sie Ihre Spaltenanzahl für jede Instanz einer verschachtelten zurücksetzen .grid. Einzelheiten finden Sie im Verschachtelungsabschnitt .

Beispiele

Drei Spalten

Mithilfe der .g-col-4Klassen können drei Spalten gleicher Breite über alle Darstellungsbereiche und Geräte hinweg erstellt werden. Fügen Sie responsive Klassen hinzu, um das Layout nach Ansichtsfenstergröße zu ändern.

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

Reaktionsschnell

Verwenden Sie reaktionsschnelle Klassen, um Ihr Layout über Ansichtsfenster hinweg anzupassen. Hier beginnen wir mit zwei Spalten in den schmalsten Ansichtsfenstern und wachsen dann auf drei Spalten in mittleren Ansichtsfenstern und darüber.

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

Vergleichen Sie das mit diesem zweispaltigen Layout in allen Ansichtsfenstern.

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

Verpackung

Rasterelemente werden automatisch in die nächste Zeile umgebrochen, wenn horizontal kein Platz mehr vorhanden ist. Beachten Sie, dass gapdies für horizontale und vertikale Lücken zwischen Rasterelementen gilt.

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

Beginnt

Startklassen zielen darauf ab, die Offsetklassen unseres Standardrasters zu ersetzen, aber sie sind nicht ganz gleich. CSS Grid erstellt eine Rastervorlage durch Stile, die Browsern mitteilen, „bei dieser Spalte zu beginnen“ und „bei dieser Spalte zu enden“. Diese Eigenschaften sind grid-column-startund grid-column-end. Startklassen sind Abkürzungen für erstere. Koppeln Sie sie mit den Spaltenklassen, um Ihre Spalten nach Bedarf zu skalieren und auszurichten. Startklassen beginnen bei 1as 0ist ein ungültiger Wert für diese Eigenschaften.

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

Automatische Spalten

Wenn die Rasterelemente (die unmittelbaren Kinder von a .grid) keine Klassen enthalten, wird jedes Rasterelement automatisch auf eine Spalte angepasst.

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

Dieses Verhalten kann mit Rasterspaltenklassen gemischt werden.

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

Verschachtelung

Ähnlich wie bei unserem Standardrastersystem ermöglicht unser CSS-Grid eine einfache Verschachtelung von .grids. Im Gegensatz zum Standard erbt dieses Raster jedoch Änderungen in den Zeilen, Spalten und Lücken. Betrachten Sie das folgende Beispiel:

• Wir überschreiben die Standardanzahl von Spalten mit einer lokalen CSS-Variablen: --bs-columns: 3.
• In der ersten Auto-Spalte wird die Spaltenanzahl vererbt und jede Spalte ist ein Drittel der verfügbaren Breite.
• In der zweiten automatischen Spalte haben wir die Spaltenanzahl für die Verschachtelung .gridauf 12 (unser Standardwert) zurückgesetzt.
• Die dritte automatische Spalte hat keinen verschachtelten Inhalt.

In der Praxis ermöglicht dies komplexere und benutzerdefinierte Layouts im Vergleich zu unserem Standardrastersystem.

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

Anpassen

Passen Sie die Anzahl der Spalten, die Anzahl der Zeilen und die Breite der Lücken mit lokalen CSS-Variablen an.

Diese CSS-Variablen haben keinen Standardwert; Stattdessen wenden sie Fallback-Werte an, die verwendet werden, bis eine lokale Instanz bereitgestellt wird. Zum Beispiel verwenden wir var(--bs-rows, 1)für unser CSS Grid rows, das ignoriert --bs-rowswird, weil das noch nirgendwo festgelegt wurde. Sobald dies der Fall ist, verwendet die .gridInstanz diesen Wert anstelle des Fallback-Werts von 1.

Keine Rasterklassen

Unmittelbar untergeordnete Elemente von .gridsind Rasterelemente, sodass ihre Größe angepasst wird, ohne dass explizit eine .g-colKlasse hinzugefügt wird.

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

Spalten und Lücken

Passen Sie die Anzahl der Spalten und den Abstand an.

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

Zeilen hinzufügen

Weitere Zeilen hinzufügen und die Platzierung von Spalten ändern:

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

Lücken

Ändern Sie die vertikalen Lücken nur durch Ändern der row-gap. Beachten Sie, dass wir gapon .grids verwenden, aber row-gapund column-gapnach Bedarf geändert werden können.

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

Aus diesem Grund können Sie unterschiedliche vertikale und horizontale gaps haben, die einen einzelnen Wert (alle Seiten) oder ein Wertepaar (vertikal und horizontal) annehmen können. Dies kann mit einem Inline-Stil für gapoder mit unserer --bs-gapCSS-Variablen angewendet werden.

<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

Eine Einschränkung des CSS-Grids besteht darin, dass unsere Standardklassen immer noch von zwei Sass-Variablen $grid-columnsund generiert werden $grid-gutter-width. Dies bestimmt effektiv die Anzahl der Klassen, die in unserem kompilierten CSS generiert werden. Sie haben hier zwei Möglichkeiten:

• Ändern Sie diese standardmäßigen Sass-Variablen und kompilieren Sie Ihr CSS neu.
• Verwenden Sie Inline- oder benutzerdefinierte Stile, um die bereitgestellten Klassen zu erweitern.

Beispielsweise können Sie die Spaltenanzahl erhöhen und die Lückengröße ändern und dann Ihre „Spalten“ mit einer Mischung aus Inline-Stilen und vordefinierten CSS-Grid-Spaltenklassen (z . B. .g-col-4) skalieren.

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