gap

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• column-gap
• row-gap

Diese Eigenschaft wird als Wert für <'row-gap'> angegeben, gefolgt von einem optionalen Wert für <'column-gap'>. Wenn <'column-gap'> weggelassen wird, wird er auf denselben Wert wie <'row-gap'> gesetzt. Sowohl <'row-gap'> als auch <'column-gap'> können jeweils als <length> oder <percentage> angegeben werden.

<length>

Gibt die Breite der Rinne an, die Spalten, Flex-Elemente, Flex-Linien und Grid-Linien trennt.

<percentage>

Gibt die Breite der Rinne an, die Spalten, Flex-Elemente, Flex-Linien und Grid-Linien relativ zur Dimension des Elements trennt.

Diese Eigenschaft definiert Abstände zwischen Spalten im CSS-Mehrspalten-Layout, zwischen Flex-Elementen und Flex-Linien im CSS-Flexbox-Layout und zwischen Zeilen und Spalten im CSS-Grid-Layout.

Die erzeugten Abstände schaffen leere Räume, die die Breite oder Höhe der angegebenen Größe der Lücke haben, ähnlich einem leeren Element oder Track. Der tatsächlich sichtbare Raum zwischen den Elementen kann sich vom angegebenen gap-Wert unterscheiden, da Ränder, Polsterungen und verteilte Ausrichtungen den Abstand zwischen den Elementen über das hinaus erhöhen können, was durch gap bestimmt wird.

Im Grid-Layout definiert der erste Wert die Rinne zwischen den Zeilen, und der zweite Wert definiert die Rinne zwischen den Spalten. In beiden, Grid- und Flex-Layouts, wenn nur ein Wert enthalten ist, wird dieser Wert für beide Dimensionen verwendet.

Bei Flex-Containern hängt es davon ab, ob der erste Wert der Abstand zwischen Flex-Elementen oder zwischen Flex-Linien ist, von der Richtung ab. Flex-Elemente werden entweder in Zeilen oder Spalten abhängig vom Wert der flex-direction-Eigenschaft angeordnet. Für Zeilen (row (Standard) oder row-reverse) definiert der erste Wert den Abstand zwischen Flex-Linien und der zweite Wert den Abstand zwischen Elementen innerhalb jeder Linie. Für Spalten (column oder column-reverse) definiert der erste Wert den Abstand zwischen Flex-Elementen innerhalb einer Flex-Linie, und der zweite Wert definiert die Abstände zwischen jeder Flex-Linie.

In Mehrspalten-Containern definiert der erste Wert den Abstand zwischen den Spalten. Eine Trennlinie kann zum ansonsten "leeren Raum" hinzugefügt werden, indem die column-rule-style-Eigenschaft oder die column-rule-Kurzform verwendet wird.

Prozentuale Gap-Werte werden immer gegen die Größe des Inhaltskastens des Container-Elements berechnet. Das Verhalten ist gut definiert und konsistent über Layout-Modi hinweg, wenn die Containergröße definiert ist. Da diese drei Layout-Modi (Mehrspalten, Flex und Grid) zyklische prozentuale Größen unterschiedlich behandeln, tut gap dies auch. Im Grid-Layout lösen sich zyklische prozentuale Größen gegen null auf, um die intrinsische Größe zu bestimmen, aber sie lösen sich gegen den Inhalt des Kastens auf, wenn die Inhalte angeordnet werden. Zwei Beispiele unten demonstrieren prozentuale Gap-Werte mit expliziter Containergröße und impliziter Containergröße im Beispielabschnitt.

Frühere Versionen der Spezifikation nannten diese Eigenschaft grid-gap, und um die Kompatibilität mit älteren Websites zu wahren, akzeptieren Browser weiterhin grid-gap als Alias für gap.

gap = 
  <'row-gap'> <'column-gap'>?  

<row-gap> = 
  normal                     |
  <length-percentage [0,∞]>  

<column-gap> = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

Ergebnis

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Ergebnis

HTML

<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  gap: 40px;
}

Ergebnis

Wenn der Container eine feste Größe hat, basieren die Berechnungen der prozentualen Gap-Werte auf der Größe des Containers. Somit ist das Gap-Verhalten in allen Layouts konsistent. Im folgenden Beispiel gibt es zwei Container, einer mit einem Grid-Layout und der andere mit einem Flex-Layout. Die Container haben fünf rote Kinder mit 20x20px. Beide Container sind explizit auf 200px Höhe eingestellt mit height: 200px und das Gap ist mit gap: 12.5% 0 gesetzt.

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body > div {
  background-color: #ccc;
  width: 200px;
  flex-flow: column;
}

#grid {
  display: inline-grid;
  height: 200px;
  gap: 12.5% 0;
}

#flex {
  display: inline-flex;
  height: 200px;
  gap: 12.5% 0;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

Nun inspizieren Sie die Grid- und Flex-Elemente mit dem Inspektor-Tab in den Web-Entwickler-Tools. Um die tatsächlichen Abstände zu sehen, bewegen Sie die Maus über die <div id="grid"> und <div id="flex">-Tags im Inspektor. Sie werden feststellen, dass der Abstand in beiden Fällen derselbe ist, nämlich 25px.

Wenn die Größe des Containers nicht explizit festgelegt ist, verhält sich der Prozentuale-Abstand im Fall von Grid- und Flex-Layouts unterschiedlich. Im folgenden Beispiel haben die Container die Höhe nicht explizit festgelegt.

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body > div {
  background-color: #ccc;
  width: 200px;
}

#grid {
  display: inline-grid;
  gap: 12.5% 0;
}

#flex {
  display: inline-flex;
  gap: 12.5% 0;
  flex-flow: column;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

Im Fall des Grid-Layouts trägt der Prozentuale-Abstand nicht zur tatsächlichen Höhe des Grids bei. Die Höhe des Containers wird unter Verwendung eines 0px-Abstands berechnet, sodass die tatsächliche Höhe sich auf 100px (20px x 5) beläuft. Dann wird der tatsächliche prozentuale Abstand mit der Höhe des Inhaltskastens berechnet, der Abstand beträgt 12.5px (100px x 12.5%). Der Abstand wird unmittelbar vor dem Rendering angewendet. Somit bleibt das Grid 100px hoch, jedoch überläuft es aufgrund des prozentualen Abstands, der später unmittelbar vor dem Rendering hinzugefügt wird.

Im Fall des Flex-Layouts ergibt der prozentuale Abstand immer einen Nullwert.

• row-gap
• column-gap
• Grundlegende Konzepte des Grid-Layouts: Rinnen
• CSS-Box-Ausrichtungsmodul
• CSS-Flexbox-Layoutmodul
• CSS-Grid-Layoutmodul
• CSS-Mehrspalten-Layoutmodul