gap

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

• column-gap
• row-gap

Diese Eigenschaft wird als Wert für <'row-gap'> angegeben, gefolgt optional von einem Wert für <'column-gap'>. Wenn <'column-gap'> weggelassen wird, wird es auf den gleichen 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, flexible Elemente, Flexzeilen und Gitternetzlinien trennt.

<percentage>

Gibt die Breite der Rinne an, die Spalten, flexible Elemente, Flexzeilen und Gitternetzlinien relativ zur Größe des Elements trennt.

Diese Eigenschaft definiert Abstände zwischen Spalten im CSS-Mehrspalten-Layout, zwischen flexiblen Elementen und Flexzeilen im CSS-Flexible-Box-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 des Abstands haben, ähnlich wie ein leeres Element oder Spur. Der sichtbare Abstand zwischen Elementen kann von dem angegebenen gap-Wert abweichen, da Ränder, Abstände und verteilte Ausrichtung den Abstand zwischen Elementen über das von gap bestimmte Maß hinaus erhöhen können.

Im Grid-Layout definiert der erste Wert die Rinne zwischen Zeilen, und der zweite Wert definiert die Rinne zwischen Spalten. In beiden Layouts, Grid und Flex, 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 flexiblen Elementen oder Zwischen Flexzeilen ist, davon, in welche Richtung sie angeordnet sind. Flexible Elemente werden je nach Wert der flex-direction Eigenschaft in Zeilen oder Spalten angeordnet. Für Zeilen (row (Standard) oder row-reverse) definiert der erste Wert den Abstand zwischen Flexzeilen und der zweite Wert den Abstand zwischen Elementen innerhalb jeder Zeile. Für Spalten (column oder column-reverse) definiert der erste Wert den Abstand zwischen flexiblen Elementen innerhalb einer Flexzeile, und der zweite Wert definiert die Abstände zwischen jeder Flexzeile.

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

Prozentuale Gap-Werte werden immer relativ zur Größe des Inhaltsfeldes des Containerelements berechnet. Das Verhalten ist gut definiert und konsistent über Layoutmodi hinweg, wenn die Containergröße definitiv ist. Da diese drei Layout-Modi (Mehrspalten-, Flex- und Grid-Layout) zyklische Prozentgrößen unterschiedlich behandeln, tut dies auch gap. Im Grid-Layout lösen zyklische Prozentsatzgrößen sich zu Null auf, um intrinsische Größen Beiträge zu bestimmen, lösen sich aber zum Inhaltsfeld des Elements auf, wenn die Inhalte abgelegt werden. Zwei Beispiele unten demonstrieren prozentuale Gap-Werte mit expliziter Containergröße und impliziter Containergröße im Beispielabschnitt.

Frühe Versionen der Spezifikation nannten diese Eigenschaft grid-gap, und um die Kompatibilität mit älteren Websites zu wahren, akzeptieren Browser immer noch 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 besitzt, basieren die Berechnungen der prozentualen Lückenwerte auf der Größe des Containers. Somit ist das Lückenverhalten über alle Layouts hinweg konsistent. Im folgenden Beispiel gibt es zwei Container, einen mit einem Grid-Layout und den anderen mit einem Flex-Layout. Die Container haben fünf rote 20x20px Kinder. Beide Container sind explizit auf 200px Höhe mittels height: 200px gesetzt und die Lücke ist mit gap: 12.5% 0 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;
  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 Lücken zu sehen, schweben Sie mit der Maus über die <div id="grid"> und <div id="flex"> Tags im Inspektor. Sie werden bemerken, dass die Lücke in beiden Fällen gleich ist, nämlich 25px.

Wenn die Größe nicht explizit auf den Container gesetzt ist, verhält sich die prozentuale Lücke im Fall von Grid- und Flex-Layouts unterschiedlich. Im folgenden Beispiel haben die Container keine ausdrücklich gesetzte Höhe.

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

Beim Grid-Layout trägt die prozentuale Lücke nicht zur tatsächlichen Höhe des Grids bei. Die Containerhöhe wird unter Verwendung einer 0px Lücke berechnet, so dass sich die tatsächliche Höhe als 100px (20px x 5) herausstellt. Dann wird die tatsächliche prozentuale Lücke unter Verwendung der Höhe des Inhaltsfeldes berechnet, die Lücke stellt sich als 12.5px (100px x 12.5%) heraus. Die Lücke wird kurz vor dem Rendern angewendet. Somit bleibt das Grid 100px hoch, aber es läuft über aufgrund der prozentualen Lücke, die kurz vor dem Rendern hinzugefügt wird.

Im Fall des Flex-Layouts ergibt die prozentuale Lücke immer einen Wert von null.

• row-gap
• column-gap
• Grundkonzepte des Grid-Layouts: Rinnen
• CSS Box-Ausrichtung Modul
• CSS Flexible Box-Layout Modul
• CSS Grid-Layout Modul
• CSS Mehrspalten-Layout Modul