Bootstrap 5: Gutters

 

In diesem Post geht es um eine weitere Klasse, die Ihnen in Bootstrap 5 das entwerfen eines Layouts erleichtert: Gutters.

Wer sich diesen Begriff aus dem englischen ins Deutsche übersetzen lässt, erhält: Dachrinnen !

Das mag im ersten Moment ein wenig befremden. Mit Gutters ist der freie Raum zwischen den einzelnen col Elementen innerhalb der row gemeint.
Wenn man ein wenig darüber nachdenkt, ist die englische Bezeichnung wohl gar nicht so weit hergeholt. Stellen Sie sich eine Website vor, die sowohl vertikal, wie auch horizontal, die Elemente mithilfe solcher Gutters strukturiert.

Wie immer bei Bootstrap 5 werden diese Gutters mithilfe einer Klasse verwendet.

Was man wissen sollte

Bevor man sich mit den Gutters befasst, sollte man wissen, das diese auf dem padding Wert von css3 beruhen. Aber was ist padding ?

Für die Darstellung von Elementen arbeitet Html mit einem sogenannten BoxModel:

Wie man im Bild sieht ist padding der Abstand, zwischen dem Inhalt (Text) und einem optionalen Rand. Ein Element kann aber auch noch über margin verfügen, einen Abstand zum nächsten Element. Wenn man einem Element also Höhe und Breite zuweisen kann, definiert man nicht die Endgültige Grösse des Elements. 

Beispiel: Breite 100px + padding-left 5px + border-left 2px + margin-left 3px = 110px
               padding-right 5px + border-right 2px+margin-right 3px = 10px
               Breite des Elements: 120px

Das gleiche gilt natürlich auch für die Höhe eines Elements.

Start

Zu Beginn starten Sie mit einem einfachen Html Code:

In diesem Html Code werden in einem ersten Schritt nur Basisklassen von Bootstrap 5 verwendet Da sind container, row und col. Das Ergebnis ist wenig spektakulär:

Der css3 Code zum Beispiel:

Der Code enthält wenig Anweisungen. Einzig bei der row wird ein fixer Wert verwendet. Ansonsten werden Farben definiert und die Höhe der div Elemente auf auto gesetzt. Von der Hintergrundfarbe sehen wir nichts. 

Grund: Mit einer auto Angabe für Höhe, wird das einzelne div Element den verfügbaren Platz komplett einnehmen. Das gilt aber auch für die horizontale Richtung.  Der Raum horizontal wird unter den drei Elementen gleichmäßig und vollständig aufgeteilt. Da so im container kein leerer Raum vorhanden ist, kann die Hintergrundfarbe nicht sichtbar sein.

Jetzt möchten Sie Gutters einsetzen. Dazu muss man wissen, wie das Verhältnis der Elemente zu einander ist. Wenn Sie einem Html Element padding oder margin Angaben hinzufügen, verändern Sie das Verhältnis dieses Elements, zu seinen Nachbar-und/oder seinem Elternelement. Gutters von Bootstrap 5 wirken sich auf die col's innerhalb der row aus ! 

Die Gutters Klasse

Diese Klasse definieren Sie durch g . Mit gx-Wert definieren Sie einen Gutter für die X Achse. Mit gy-Wert dementsprechend für die Y Achse. Um den Abstand zu berechnen müssen Sie wissen, das die Grundeinheit über die Variable $spacer definiert wird. Man kann diese manipulieren, aber das ist nicht Inhalt dieses Posts. 

$spacer = 1rem oder ca.16px, je nach Browser. 

Wenn Sie mehr über rem lernen möchten, hier ein Link dazu.  In der Bootstrap 5 Dokumentation findet sich folgende Tabelle:

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Sie sehen, das die Default Einstellung des Gridsystem 1.5rem ist. Sie nehmen also den Wert von $spacer und multiplizieren ihn mit dem Wert in der Tabelle. Für gx-4 heisst das:

16x1,5 = 24px

Was im übrigen dem Default Wert, $grid-gutter-width entspricht.

Wie wende ich die Gutter Klasse an ?

Mit gx und gy  können Sie explizit auf den jeweiligen Achsen Werte definieren. Mit g alleine definieren Sie werte für beide Achsen gleichzeitig, z.b. g-4 .

Beispiel Code:

Und der dazugehörige Html Code:

Im Code oben verwenden wir die Gutters Klasse g-3. Das heisst der Wert wird auf allen Seiten angewandt. Zusätzlich haben innerhalb der col divs, ein weiteres div eingefügt.

Dies vor allem für Demo Zwecke. Leere Flächen sind prinzipiell Transparent. Ohne dieses zusätzliche div wäre das Padding nicht sichtbar.

Im css3 Code sprechen wir die child divs mit .row div div{...} an. Das Ergebnis:

Wichtig ist noch: der Gutter Wert, hier g-3 (16px), wird links und rechts mit jeweils 8px umgesetzt. In der vertikalen Richtung aber mit 16px.

Auch sieht man, das der Gutter in der vertikalen Richtung zu Beginn nicht umgesetzt wird.

Erst in der Reihe mit drittes und viertes Kind, aber auch nur oben (top).

Bis Bald !