gap CSS-Eigenschaft

Probieren Sie es aus

gap: 0;

gap: 10%;

gap: 1em;

gap: 10px 20px;

gap: calc(20px + 10%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Bestandteile der Eigenschaften

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

• row-gap
• column-gap

Syntax

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;

Werte

Diese Eigenschaft wird als ein Wert für <'row-gap'> angegeben, gefolgt von einem optionalen Wert für <'column-gap'>. Wenn <'column-gap'> weggelassen wird, wird es 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.

Beschreibung

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 Leerstellen, die die Breite oder Höhe der angegebenen Größe des Abstands haben, ähnlich wie ein leeres Element oder eine Spur. Der sichtbare Raum zwischen Elementen kann sich von dem angegebenen gap-Wert unterscheiden, da Ränder, Abstände und verteilte Ausrichtung den Abstand zwischen Elementen über das hinaus erhöhen können, was durch gap bestimmt wird.

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

In Flex-Containern hängt davon ab, ob der erste Wert der Abstand zwischen Flex-Elementen oder Flex-Linien ist, in welche Richtung. Flex-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 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 den Abstand zwischen jeder Flex-Linie.

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

Prozentuale Abstandsangaben werden immer gegen die Größe des Inhaltsbereichs des Containerelements berechnet. Das Verhalten ist gut definiert und konsistent über Layout-Modi hinweg, wenn die Containergröße bestimmt ist. Da diese drei Layout-Modi (Mehrspalte, Flex und Grid) zyklische Prozentsatzgrößen unterschiedlich behandeln, tut gap dies ebenfalls. Im Grid-Layout lösen sich zyklische Prozentsatzgrößen bei der Bestimmung von intrinsischer Größe gegen null auf, aber lösen sich gegen die Content-Box des Elements auf, wenn der Inhalt angeordnet wird. Zwei Beispiele unten demonstrieren Prozentwert-Lücken mit expliziter Containergröße und impliziter Containergröße im Beispielbereich.

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

Formale Definition

Formale Syntax

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

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

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

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

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Beispiele

Flex-Layout

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

Grid-Layout

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

Mehrspalten-Layout

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

Prozentwert-Lücke und explizite Containergröße

Wenn der Container eine feste Größe hat, berechnen sich die Prozentwerte der Lücken basierend 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 mit height: 200px gesetzt und die Lücke ist mit gap: 12.5% 0 eingestellt.

<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: #cccccc;
  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 Inspector-Tab in den Web Developer Tools. Um die tatsächlichen Lücken zu sehen, bewegen Sie die Maus über die <div id="grid"> und <div id="flex"> Tags im Inspektor. Sie werden feststellen, dass die Lücke in beiden Fällen gleich ist, nämlich 25px.

Prozentwert-Lücke und implizite Containergröße

Wenn die Größe nicht explizit am Container gesetzt ist, verhält sich die prozentuale Lücke unterschiedlich im Fall von Grid- und Flex-Layouts. Im folgenden Beispiel haben die Container keine Höhe explizit 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: #cccccc;
  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 Prozentwert der Lücke nicht zur tatsächlichen Höhe des Grids bei. Die Höhe des Containers wird mithilfe eines 0px-Abstands berechnet, sodass sich die tatsächliche Höhe auf 100px (20px x 5) beläuft. Dann wird der tatsächliche Prozentwert-Lücke mithilfe der Höhe der Content-Box berechnet, die Lücke ergibt sich als 12.5px (100px x 12.5%). Die Lücke wird kurz vor dem Rendern angewendet. Somit bleibt das Grid 100px hoch, aber es kommt zu Überläufen aufgrund der prozentualen Lücke, die später kurz vor dem Rendern hinzugefügt wird.

Im Fall des Flex-Layouts führt die prozentuale Lücke immer zu einem Wert von Null.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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