Beachten Sie den "Abstand"

Sie kennen vielleicht schon die CSS gap-Eigenschaft. Sie ist nicht gerade neu, hat aber letztes Jahr eine wichtige neue Fähigkeit erlangt: Sie funktioniert jetzt zusätzlich zu CSS Grid auch in Flexbox. Das und die Tatsache, dass ich glaube, dass die Eigenschaft komplizierter ist, als sie scheint, haben mich dazu veranlasst, zurückzugehen und genau zu erklären, wie sie funktioniert.

Werfen wir einen genaueren Blick auf gap und die zugehörigen Eigenschaften und verstehen wir, wie und wo sie funktionieren.

Alle Gap-Eigenschaften

Um zu beginnen, lassen Sie uns alle CSS-Eigenschaften überprüfen, die mit gap zusammenhängen. Es gibt insgesamt sechs.

• grid-row-gap
• grid-column-gap
• grid-gap
• row-gap
• column-gap
• gap

Aus dieser Liste können wir die ersten drei Eigenschaften bereits ignorieren. Die grid-*-Eigenschaften wurden früh hinzugefügt, als die Spezifikationen von CSS Grid entworfen wurden, und später als veraltet eingestuft, als gap allgemeiner wurde. Browser unterstützen diese veralteten grid-*-Eigenschaften immer noch (zum Zeitpunkt der Veröffentlichung) und behandeln sie lediglich so, als wäre das grid-Präfix nicht vorhanden. Daher ist grid-gap dasselbe wie gap, grid-column-gap dasselbe wie column-gap und grid-row-gap dasselbe wie row-gap.

Was die anderen drei Eigenschaften betrifft, so wissen wir, dass gap eine Kurzschreibweise ist, die es Ihnen ermöglicht, die anderen beiden Eigenschaften anzugeben, und wir müssen wirklich nur wissen, was row-gap und column-gap tun.

Unser Verständnis dieser Eigenschaften hängt von der Art des von uns verwendeten CSS-Layouts ab. Betrachten wir zuerst diese Optionen.

Wo können Gaps verwendet werden?

Wenn Sie wie ich sind, haben Sie Gaps in Grid-Layouts verwendet, aber sie können jetzt in Flexbox sowie in Multi-Column-Layouts verwendet werden. Gehen wir jeden Fall durch.

Grid Gaps

Alle Browser unterstützen Gaps in Grid-Layouts, und sie sind in diesem Zusammenhang ziemlich einfach zu verstehen.

• row-gap fügt Leerräume zwischen Zeilen-Tracks hinzu.
• column-gap fügt Leerräume zwischen Spalten-Tracks hinzu.

Lassen Sie uns ein Grid mit drei Spalten und zwei Zeilen erstellen.

.container {
  display: grid;
  grid-template-columns: 200px 100px 300px;
  grid-template-rows: 100px 100px;
}

Dies ergibt das folgende Grid:

Die Linien im obigen Bild werden als Grid-Linien bezeichnet und trennen die Tracks (Zeilen und Spalten) des Grids. Diese Linien existieren im Grid nicht wirklich – sie sind unsichtbar, haben keine Dicke und sind typischerweise das, was DevTools anzeigt, wenn wir den Grid-Inspektor aktivieren (in Safari, Firefox, Edge oder Chrome).

Wenn wir jedoch beginnen, Gaps zu unserem Grid hinzuzufügen, funktioniert es so, als würden diese Linien anfangen, Dicke zu erwerben.

Lassen Sie uns einen 20px Gap hinzufügen.

.container {
  display: grid;
  grid-template-columns: 200px 100px 300px;
  grid-template-rows: 100px 100px;
  gap: 20px;
}

Die Linien zwischen unseren Tracks sind nun 20px dick und schieben daher die Grid-Items weiter auseinander.

Es ist erwähnenswert, dass die Tracks immer noch die gleichen Größen haben (definiert durch die grid-template-*-Eigenschaften); daher ist das Grid breiter und höher als ohne Gaps.

In Grid gilt row-gap immer zwischen Zeilen-Tracks. Wenn wir also gap im obigen Beispiel durch row-gap ersetzen, erhalten wir dies:

Und column-gap gilt immer zwischen Spalten-Tracks. Wenn wir also gap durch column-gap ersetzen, erhalten wir folgendes Ergebnis:

Grid ist einfach, denn standardmäßig sind Spalten vertikal und Zeilen horizontal, genau wie in einer Tabelle. Daher ist es leicht zu merken, wo column-gap und row-gap gelten.

Nun werden die Dinge ein wenig komplizierter, wenn writing-mode verwendet wird. Der Standard-Schreibmodus im Web ist horizontal, von links nach rechts, aber es gibt auch vertikale Schreibmodi, und wenn das passiert, werden Spalten horizontal und Zeilen vertikal. Achten Sie immer auf writing-mode, da es weniger intuitiv sein kann, als es normalerweise ist.

Dies ist ein guter Übergang zum nächsten Abschnitt, da Spalten und Zeilen in Flexbox neue Bedeutungen erhalten.

Flexbox Gaps

Lassen Sie uns über Gaps in Flexbox-Layouts sprechen, wo die Dinge etwas komplizierter werden. Wir verwenden das folgende Beispiel:

.container {
  display: flex;
}

Standardmäßig erhalten wir einen row Flex-Container, was bedeutet, dass die Elemente innerhalb des Containers von links nach rechts auf derselben horizontalen Linie gestapelt werden.

In diesem Fall wird column-gap zwischen den Elementen angewendet und row-gap tut nichts. Das liegt daran, dass es nur eine Zeile gibt. Aber fügen wir nun einen Gap zwischen den Elementen hinzu.

.container {
  display: flex;
  column-gap: 10px;
}

Lassen Sie uns nun die flex-direction unseres Containers auf column ändern, was die Elemente vertikal, von oben nach unten, stapelt, mit dem folgenden Code:

.container {
  display: flex;
  flex-direction: column;
  column-gap: 10px;
}

Hier ist, was passiert:

Der Gap verschwand. Selbst wenn column-gap Platz zwischen den Elementen einfügte, als der Container in row-Richtung war, funktioniert er in column-Richtung nicht mehr.

Wir müssen row-gap verwenden, um ihn zurückzubekommen. Alternativ könnten wir die gap-Kurzschreibweise mit einem Wert verwenden, der denselben Gap in beiden Richtungen anwendet und daher in beiden Fällen funktioniert.

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

Zusammenfassend lässt sich sagen, dass column-gap immer vertikal funktioniert (unter der Annahme des Standard-writing-mode) und row-gap immer horizontal funktioniert. Dies hängt nicht von der Richtung des Flex-Containers ab.

Aber schauen wir uns nun ein Beispiel an, bei dem Zeilenumbruch involviert ist:

.container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 10px;
  justify-content: center;
}

Hier erlauben wir den Elementen, auf mehreren Zeilen umzubrechen mit flex-wrap: wrap, wenn nicht genügend Platz vorhanden ist, um alles in einer einzigen Zeile unterzubringen.

In diesem Fall wird der column-gap immer noch vertikal zwischen den Elementen angewendet, und row-gap wird horizontal zwischen den beiden Flex-Zeilen angewendet.

Es gibt einen interessanten Unterschied zwischen diesem und Grid. Die Spalten-Gaps richten sich nicht unbedingt über die Flex-Zeilen hinweg aus. Das liegt an justify-content: center, was die Elemente innerhalb ihrer Flex-Zeilen zentriert. Auf diese Weise können wir sehen, dass jede Flex-Zeile ein separates Layout ist, bei dem Gaps unabhängig von anderen Zeilen gelten.

Multi-Column Gaps

Multi-column ist eine Art von Layout, die es sehr einfach macht, Inhalte automatisch zwischen mehreren Spalten fließen zu lassen, wie man es vielleicht von einem traditionellen Zeitungsartikel erwarten würde. Wir legen eine Anzahl von Spalten fest und definieren die Größe jeder Spalte.

Gaps in Multi-Column-Layouts funktionieren nicht ganz gleich wie in Grid oder Flexbox. Es gibt drei bemerkenswerte Unterschiede:

• row-gap hat keine Auswirkung,
• column-gap hat einen Standardwert ungleich 0,
• und Gaps können gestylt werden.

Lassen Sie uns diese aufschlüsseln. Erstens hat row-gap keine Auswirkung. In Multi-Column-Layouts gibt es keine Zeilen zu trennen. Das bedeutet, dass nur column-gap relevant ist (ebenso wie die gap-Kurzschreibweise).

Zweitens hat column-gap in Multi-Column-Layouts im Gegensatz zu Grid und Flexbox einen Standardwert von 1em (im Gegensatz zu 0). Selbst wenn überhaupt kein Gap angegeben ist, sind die Inhaltsspalten visuell getrennt. Der Standard-Gap kann natürlich überschrieben werden, aber es ist ein guter Standard.

Hier ist der Code, auf dem das Beispiel basiert:

.container {
  column-count: 3;
  padding: 1em;
}

Schließlich können wir den leeren Gap zwischen Spalten in einem Multi-Column-Layout gestalten. Wir verwenden die Eigenschaft column-rule, die wie border funktioniert.

.container {
  column-count: 3;
  column-gap: 12px;
  column-rule: 4px solid red;
  padding: 12px;
}

Browser-Unterstützung

gap ist überall sehr gut unterstützt. Es gibt weitere Informationen unter caniuse, aber zusammenfassend:

• Flexbox: gap wird überall unterstützt, außer in Internet Explorer (der auf dem Weg nach draußen ist), Opera Mini und UC Browser für Android. caniuse hat eine globale Unterstützung von 87,31 %.
• Grid: Dasselbe, aber wir betrachten eine globale Unterstützung von 93,79 %.
• Multi-column: Dasselbe auch, aber es wird in Safari nicht unterstützt und hat eine globale Unterstützung von 75,59 %.

Insgesamt ist die gap-Eigenschaft gut unterstützt und in den meisten Fällen sind Workarounds nicht erforderlich.

Gestalten des Gaps in Flex und Grid

Das Gestalten von gap in Flexbox und CSS Grid wäre sehr nützlich. Die schlechte Nachricht ist, dass es heute noch nirgends unterstützt wird. Aber die gute Nachricht ist, dass es in naher Zukunft möglich sein könnte. Dies wurde in der CSS Working Group diskutiert und ist in Firefox in Arbeit. Sobald wir eine funktionierende Implementierung in Firefox haben, wird sie vielleicht zusammen mit dem Spec-Vorschlag die Implementierung in anderen Browsern vorantreiben.

In der Zwischenzeit gibt es Auswege.

Eine Möglichkeit ist, dem Grid-Container eine Hintergrundfarbe zu geben, dann eine andere Farbe für die Elemente und schließlich einen Gap, damit die Containerfarbe durchscheint.

Das funktioniert zwar, bedeutet aber, dass wir keine Gaps verwenden können, um Platz zwischen den Elementen zu schaffen. Die gap fungiert hier eher als Randbreite. Um die Elemente visuell etwas besser zu trennen, müssen wir also padding oder margin auf den Elementen verwenden, was nicht so toll ist ... wie wir im nächsten Abschnitt sehen werden.

Kann ich nicht einfach Margin oder Padding verwenden?

Ja, in den meisten Fällen können wir auch Margin (und/oder Padding) verwenden, um visuelle Abstände zwischen Elementen eines Layouts zu schaffen. Aber gap bietet mehrere Vorteile.

Erstens werden Gaps auf Containerebene definiert. Das bedeutet, wir definieren sie einmal für das gesamte Layout und sie werden darin konsistent angewendet. Die Verwendung von Margins würde eine Deklaration für jedes einzelne Element erfordern. Dies kann kompliziert werden, wenn die Elemente unterschiedlicher Natur sind oder aus verschiedenen wiederverwendbaren Komponenten stammen.

Darüber hinaus tun Gaps standardmäßig das Richtige mit nur einer Codezeile. Wenn wir zum Beispiel versuchen, etwas Abstand *zwischen* Flex-Elementen zu schaffen, nicht um sie herum, würde margin Sonderfälle erfordern, um überschüssige Margins vor dem ersten Element und nach dem letzten zu entfernen. Mit Gaps müssen wir das nicht tun.

Mit margin: 0 20px auf jedem Flex-Element erhalten wir:

Mit einem gap: 40px auf dem Container würden wir dies erhalten:

Ähnlich wie im Grid-Layout ist die Definition von gap auf der Containerebene viel einfacher und liefert bessere Ergebnisse, als die Definition eines Margins auf jedem Element und die Berücksichtigung des Margins, das am Rand des Grids gilt.

Mit margin: 20px auf jedem Grid-Element:

Und stattdessen mit gap: 40px auf dem Grid-Container:

Leerer Raum addiert sich

Mit allem, was bisher gesagt wurde, müssen margin und gap nicht exklusiv sein. Tatsächlich gibt es viele Möglichkeiten, Elemente eines Layouts weiter auseinander zu schieben, und sie können alle sehr gut zusammenarbeiten.

Die gap-Eigenschaft ist nur ein Teil des leeren Raums, der zwischen Boxen in einem Layout-Container entsteht. margin, padding und Ausrichtung können alle den leeren Raum zusätzlich zu dem, was gap bereits definiert, erhöhen.

Betrachten wir ein Beispiel, bei dem wir ein einfaches Flex-Layout mit einer gegebenen Breite, etwas Gap, einer gewissen Inhaltsverteilung (mit justify-content) sowie etwas Margin und Padding erstellen.

.container {
  display: flex;
  gap: 40px;
  width: 900px;
  justify-content: space-around;
}
.item {
  padding: 20px;
  margin: 0 20px;
}

Nehmen wir an, dieser Code erzeugt das folgende Ergebnis:

Lassen Sie uns nun genau betrachten, wie der leere Raum zwischen den Elementen entstanden ist.

Wie wir sehen, gibt es vier verschiedene Arten von leerem Raum zwischen zwei aufeinanderfolgenden Flex-Elementen:

• Zwischen zwei aufeinanderfolgenden Elementen definiert der Gap den minimalen Abstand zwischen diesen Elementen. Es kann mehr geben, wie in diesem Fall, aber es kann nie weniger Abstand geben.
• Margin schiebt die Elemente noch weiter auseinander, aber im Gegensatz zu gap fügt es auf beiden Seiten aller Elemente Platz hinzu.
• Padding schafft etwas Platz innerhalb jedes Elements.
• Schließlich, und nur weil genügend Restplatz vorhanden ist, greift die Inhaltsverteilung und verteilt die Elemente gleichmäßig innerhalb der Flex-Zeile, entsprechend dem Wert space-around.

Fehlersuche bei Gaps

Lassen Sie uns mit einem Thema abschließen, das mir sehr am Herzen liegt: DevTools-Unterstützung für das Debugging von Gaps. Es kann immer Fälle geben, in denen etwas schiefgeht, und zu wissen, dass DevTools uns unterstützt, ist sehr beruhigend, aber wir müssen wissen, welche Tools uns in diesem Fall helfen können.

Für gap fallen mir zwei sehr spezifische Features ein, die nützlich sein könnten.

Ist mein Gap aktiv?

Es sei denn, wir haben gap falsch geschrieben oder einen ungültigen Wert angegeben, wird die Eigenschaft immer auf die Seite angewendet. Zum Beispiel ist dies korrekt:

.some-class {
  display: block;
  gap: 3em;
}

Es wird nichts tun, aber es ist gültiges CSS und der Browser hat nichts dagegen, dass gap nicht auf Block-Layouts angewendet wird. Firefox hat jedoch eine Funktion namens Inactive CSS, die genau das tut: Sie kümmert sich um gültiges CSS, das auf Dinge angewendet wird, die Sinn ergeben. In diesem Fall zeigt Firefox DevTools eine Warnung im Inspector an.

Wo ist mein Gap?

Chrome und Microsoft Edge haben ebenfalls eine sehr nützliche Funktion zum Debuggen von Gaps. Sie wurde durch eine Zusammenarbeit zwischen Microsoft und Google hinzugefügt, die darauf abzielte, Layout-Debugging-Tools in Chromium zu entwickeln (das Open-Source-Projekt, das beide Browser sowie andere antreibt). In diesen Browsern können Sie über einzelne Eigenschaften im Styles-Panel schweben und ihre Auswirkungen auf der Seite sehen.

Und das ist alles. Ich hoffe, dieser Artikel war hilfreich, um einige der Details zu verstehen, wie Gaps in CSS funktionieren.