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 optional von einem 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, flexible Elemente, flexible Linien und Rasterlinien trennt.

<percentage>

Gibt die Breite der Rinne an, die Spalten, flexible Elemente, flexible Linien und Rasterlinien relativ zur Dimension des Elements trennt.

Diese Eigenschaft definiert Abstände zwischen Spalten in einem CSS-Mehrspalten-Layout, zwischen flexiblen Elementen und flexiblen Linien in einem CSS-Flexible-Box-Layout und zwischen Reihen und Spalten in einem CSS-Raster-Layout.

Die erzeugten Lücken schaffen leere Räume, die die Breite oder Höhe der angegebenen Lückengröße haben, ähnlich wie ein leeres Element oder eine Spur. Der sichtbare Raum zwischen den Elementen kann sich vom angegebenen gap-Wert unterscheiden, da Ränder, Abstände und verteilte Ausrichtung den Abstand zwischen den Elementen über das hinaus erhöhen können, was durch gap bestimmt wird.

Im Rasterlayout definiert der erste Wert die Rinne zwischen den Reihen, und der zweite definiert die Rinne zwischen den Spalten. In beiden, Raster und flexiblen Layouts, wenn nur ein Wert angegeben wird, wird dieser Wert für beide Dimensionen verwendet.

Bei flexiblen Containern hängt es von der Richtung ab, ob der erste Wert der Abstand zwischen flexiblen Elementen oder zwischen flexiblen Linien ist. Flexible Elemente werden entweder in Reihen oder Spalten basierend auf dem Wert der flex-direction-Eigenschaft angeordnet. Für Reihen (row (Standard) oder row-reverse) definiert der erste Wert den Abstand zwischen flexiblen Linien und der zweite Wert den Abstand zwischen den Elementen innerhalb jeder Linie. Für Spalten (column oder column-reverse) definiert der erste Wert den Abstand zwischen flexiblen Elementen innerhalb einer flexiblen Linie und der zweite Wert den Abstand zwischen jeder flexiblen Linie.

Bei mehrspaltigen Containern definiert der erste Wert den Abstand zwischen Spalten. Eine Trennlinie kann dem ansonsten "leeren Raum" durch Verwendung der column-rule-style-Eigenschaft oder der column-rule-Kurzform hinzugefügt werden.

Prozentuale Lückenwerte werden immer basierend auf der Größe des Inhaltsrahmens des Containerelements berechnet. Das Verhalten ist gut definiert und konsistent über Layoutmodi hinweg, wenn die Containergröße bestimmt ist. Da diese drei Layoutmodi (Mehrspalten, flexibel und Raster) zyklische Prozentgrößen unterschiedlich behandeln, tut dies auch gap. Im Rasterlayout lösen sich zyklische Prozentgrößen im Hinblick auf die Bestimmung von intrinsischen Größen gegen null auf, während sie sich beim Layouterstellung gegen den Inhaltsrahmen des Elements auflösen. Zwei Beispiele unten zeigen prozentuale Lückenwerte mit expliziter Containergröße und impliziter Containergröße im Abschnitt Beispiele.

Frühere Versionen der Spezifikation nannten diese Eigenschaft grid-gap und um die Kompatibilität mit älteren Websites aufrechtzuerhalten, akzeptieren Browser grid-gap weiterhin 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 die Containergröße festgelegt ist, basieren die Berechnungen des prozentualen Lückenwerts auf der Größe des Containers. Daher ist das Lückenverhalten in allen Layouts konsistent. Im folgenden Beispiel gibt es zwei Container, einen mit Rasterlayout und einen mit flexiblem Layout. Die Container haben fünf rote 20x20px-Kinder. Beide Container sind explizit auf 200px Höhe mit height: 200px gesetzt und die Lücke wird 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;
}

Überprüfen Sie nun die Raster- und Flex-Elemente mit dem Inspektor-Tab in den Webentwickler-Tools. Um die tatsächlichen Lücken zu sehen, fahren 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 am Container festgelegt ist, verhält sich die prozentuale Lücke im Fall von Raster- 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 Rasterlayouts trägt die prozentuale Lücke nicht zur tatsächlichen Höhe des Rasters bei. Die Containerhöhe wird unter Verwendung von 0px Lücke berechnet, sodass sich die tatsächliche Höhe auf 100px (20px x 5) beläuft. Dann wird die tatsächliche prozentuale Lücke unter Verwendung der Höhe des Inhaltsrahmens berechnet, die Lücke beträgt 12.5px (100px x 12.5%). Die Lücke wird unmittelbar vor der Darstellung angewandt. Daher bleibt das Raster 100px hoch, läuft jedoch wegen der kurz vor der Darstellung hinzugefügten prozentualen Lücke über.

Im Fall des flexiblen Layouts führt die prozentuale Lücke immer zu einem Nullwert.

• row-gap
• column-gap
• Grundlegende Konzepte des Rasterlayouts: Rinnen
• CSS Box-Ausrichtung Modul
• CSS Flexibles Box-Layout Modul
• CSS Raster-Layout Modul
• CSS Mehrspalten-Layout Modul