Gap | CSS-Tricks

Mojtaba Seyedi am 22. Sep 2022

Die `gap`-Eigenschaft in CSS ist eine Kurzschreibweise für `row-gap` und `column-gap`, die die Größe von Rinnen angibt, also den Abstand zwischen Zeilen und Spalten innerhalb von Grid-, Flex- und Mehrspaltenlayouts.

/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr 1fr;
  gap: 30px 20px;
}

/* Flex layout */
.container {
  display: flex;
  gap: 10%;
}

/* Multi-column layout */
.container {
  column-count: 5;
  gap: 20px;
}

Diagram showing six boxes in two rows of three with gaps between them to illustrate the effect of the gap property.

Verwenden Sie den Schieberegler in der untenstehenden Demo, um die `gap`-Eigenschaft in Aktion zu sehen

Syntax

gap akzeptiert einen oder zwei Werte

Ein einzelner Wert setzt sowohl `row-gap` als auch `column-gap` auf denselben Wert.
Wenn zwei Werte verwendet werden, setzt der erste Wert `row-gap` und der zweite Wert `column-gap`.

.container {
  gap: 1rem;
  /* Is equivalent to:
  *  row-gap: 1rem;
  *  column-gap: 1rem
  */
  
  gap: 10px 15%;
  /* Is equivalent to:
  *  row-gap: 10px;
  *  column-gap: 15%;
  */
}

Die Spezifikation für das CSS Grid Layout Module definierte den Abstand zwischen Grid-Bahnen mit der `grid-gap`-Eigenschaft. `gap` soll sie ersetzen, damit Lücken in mehreren CSS-Layoutmethoden, wie Flexbox, definiert werden können. `grid-gap` muss jedoch weiterhin in Fällen verwendet werden, in denen ein Browser `grid-gap` implementiert hat, aber die neuere `gap`-Eigenschaft noch nicht unterstützt.

Werte

gap akzeptiert die folgenden Werte

normal: (Standard) Der Browser gibt für Mehrspaltenlayouts einen genutzten Wert von 1em und für alle anderen Layoutkontexte (d. h. Grid und Flex) 0px an.
<length>: Jede gültige und nicht-negative CSS-Länge, wie z. B. `px`, `em`, `rem` und `%`, unter anderem.
<percentage>: Die Größe des Abstands als nicht-negativer Prozentwert relativ zur Dimension des Elements. (Siehe unten für Details.)
initial: Wendet die Standardeinstellung der Eigenschaft an, nämlich `normal`.
inherit: Übernimmt den `gap`-Wert des Elternelements.
unset: Entfernt den aktuellen `gap` vom Element.

Prozentwerte bei `gap`-Eigenschaften

Wenn die Größe eines Containers in der `gap`-Dimension eindeutig ist, löst `gap` Prozentwerte gegen die Größe der Inhaltsbox des Containers in allen Layouttypen auf.

Mit anderen Worten: Wenn der Browser die Größe des Containers kennt, kann er den Prozentwert des `gap` berechnen. Wenn beispielsweise die Höhe des Containers 100 Pixel beträgt und der `gap` auf 10 % eingestellt ist, weiß der Browser, dass 10 % von 100 Pixel 10 Pixel sind.

Aber wenn der Browser die Größe nicht kennt, fragt er sich: „10 % von was?“ In diesen Fällen verhält sich `gap` je nach Layouttyp unterschiedlich.

In einem Grid-Layout lösen sich Prozentwerte gegen Null auf, um intrinsische Größenbeiträge zu bestimmen, lösen sich aber beim Layout der Box-Inhalte gegen die Inhaltsbox des Elements auf, was bedeutet, dass zwischen den Elementen ein Abstand eingefügt wird, der Abstand aber die Größe des Containers nicht beeinflusst.

In dieser Demo ist die Höhe des Containers nicht eindeutig. Sehen Sie, was passiert, wenn Sie die `gap`-Größe erhöhen. Setzen Sie dann den `gap` in Pixeln und versuchen Sie es erneut

In einem Flex-Layout lösen sich Prozentwerte in allen Fällen gegen Null auf, was bedeutet, dass Lücken nicht angewendet werden, wenn die Größe des Containers dem Browser nicht bekannt ist.

Verwendung der `calc()`-Funktion mit `gap`

Sie können die `calc()`-Funktion verwenden, um die Größe des `gap` anzugeben, aber zum Zeitpunkt der Erstellung dieses Textes gibt es **keine Unterstützung dafür** in Safari und iOS.

.flex-layout {
  display: flex;
  gap: calc(5vh + 5px) calc(5vw + 5px);
}
 
.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(5vmin + 5px);
}

Beispiele

Die `gap`-Eigenschaft ist für die Verwendung in Grid-, Flex- und Mehrspaltenlayouts konzipiert. Schauen wir uns einige Beispiele an.

Grid-Layout

In der folgenden Demo sehen Sie, wie `gap` verwendet wird, um die `row-gap`- und `column-gap`-Eigenschaften auf einem Grid-Container festzulegen und damit die Rinnen zwischen Grid-Zeilen und Grid-Spalten zu definieren.

Flex-Layout

Das Anwenden von `gap` auf die **Hauptachse** eines Flex-Containers bedeutet einen Abstand **zwischen den Flex-Elementen** in einer einzigen Zeile des Flex-Layouts.

Hier wird `column-gap` in Zeilenrichtung verwendet

Hier wird `row-gap` in Spaltenrichtung verwendet

Das Anwenden von `gap` auf die **Querachse** eines Flex-Containers bedeutet einen Abstand **zwischen den Flex-Zeilen** des Flex-Layouts.

Hier ist `row-gap` in Zeilenrichtung

Hier ist `column-gap` in Spaltenrichtung

Mehrspaltiges Layout

`column-gap` erscheint in Mehrspaltenlayouts, um Abstände zwischen Spaltenboxen zu erzeugen. Beachten Sie jedoch, dass `row-gap` keine Wirkung hat, da wir nur mit Spalten arbeiten. `gap` kann in diesem Kontext immer noch verwendet werden, aber nur `column-gap` wird angewendet.

Wie Sie in der nächsten Demo sehen können, obwohl die `gap`-Eigenschaft den Wert 2rem hat, trennt sie die Elemente nur horizontal anstatt in beide Richtungen, da wir in Spalten arbeiten.

Je mehr Sie wissen...

Es gibt ein paar Dinge, die man beim Arbeiten mit der `gap`-Eigenschaft beachten sollte.

Es ist eine gute Möglichkeit, unerwünschte Abstände zu vermeiden

Haben Sie jemals Ränder verwendet, um Abstände zwischen Elementen zu schaffen? Wenn wir nicht aufpassen, können wir zusätzlichen Abstand vor und nach der Gruppe von Elementen erhalten.

Das Lösen dieses Problems erfordert normalerweise das Hinzufügen negativer Ränder oder das Zurückgreifen auf Pseudo-Selektoren, um Ränder von bestimmten Elementen zu entfernen. Aber das Schöne an der Verwendung von `gap` in moderneren Layoutmethoden ist, dass Sie nur Abstand *zwischen* den Elementen haben. Der zusätzliche unnötige Platz am Anfang und Ende ist nie ein Problem!

Aber, hey, wenn Sie trotzdem Abstand um die Elemente herum haben möchten, während Sie `gap` verwenden, setzen Sie `padding` um den Container, wie hier

.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

Die Rinnenbreite entspricht nicht immer dem `gap`-Wert

Die `gap`-Eigenschaft ist nicht das Einzige, das Abstand zwischen Elementen schaffen kann. Ränder, Abstände, `justify-content` und `align-content` können ebenfalls die Rinnenbreite erhöhen und den tatsächlichen `gap`-Wert beeinflussen.

Im folgenden Beispiel setzen wir einen `gap` von 1em, aber wie Sie sehen können, gibt es viel mehr Platz zwischen den Elementen, verursacht durch die Verwendung von verteilten Ausrichtungen wie `justify-content` und `align-content`.

Browser-Unterstützung

Feature-Abfragen sind normalerweise eine gute Möglichkeit, um zu prüfen, ob ein Browser eine bestimmte Eigenschaft unterstützt. In diesem Fall kann es jedoch bei der Überprüfung der `gap`-Eigenschaft in Flexbox zu einem falschen positiven Ergebnis kommen, da eine Feature-Abfrage nicht zwischen Layoutmodi unterscheidet. Mit anderen Worten, es könnte in einem Flex-Layout unterstützt werden, was zu einem positiven Ergebnis führt, aber es wird tatsächlich nicht unterstützt, wenn es in einem Grid-Layout verwendet wird.

Grid-Layout

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	16+	61+	66+	12+	53+

iOS Safari	Opera Mobile	Android Browser	Chrome für Android	Firefox für Android
12+	Nein	81+	84+	68+

Grid-Layout mit `calc()`-Werten

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	84+	79+	84+	Nein	69+

iOS Safari	Opera Mobile	Android Browser	Chrome für Android	Firefox für Android
Nein	Nein	81+	84+	68+

Grid-Layout mit Prozentwert

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	84+	79+	84+	Nein	69+

iOS Safari	Opera Mobile	Android Browser	Chrome für Android	Firefox für Android
Nein	Nein	81+	84+	68+

Flex-Layout

Die Spezifikation für die Verwendung von `gap` mit Flexbox befindet sich derzeit im Status "Working Draft".

Diese Browser-Supportdaten stammen von Caniuse, wo es weitere Details gibt. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.