Eigenschaft column-gap

Die Eigenschaft column-gap legt den Abstand zwischen Spalten in mehrspaltigem Text fest sowie den Abstand zwischen Spalten im Grid. Als Wert der Eigenschaft dienen beliebige Einheiten für Größen oder das Schlüsselwort normal (standardmäßig), bei dem der Browser selbst einen optimalen Abstand zwischen den Spalten wählt.

Syntax

cssSelektor {
  column-gap: Wert;
}

Beispiel

In diesem Beispiel wurde die Anzahl der Spalten column-count (3 Stück) und der Abstand zwischen ihnen column-gap mit 50px angegeben. Die Spaltenbreite wird automatisch so angepasst, dass diese Bedingungen erfüllt werden (Anzahl der Spalten und Abstand zwischen ihnen):

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Beispiel . Wert normal

In diesem Beispiel wurde die Spaltenbreite column-width mit 150px angegeben, ihre Anzahl column-count steht auf dem Wert auto, und der Abstand column-gap zwischen ihnen - auf dem Wert normal. Somit wählt der Browser selbst die erforderliche Anzahl an Spalten und den Abstand zwischen ihnen (aber ihre Breite beträgt 150px):

html<div id="elem">
  some long text
</div>

css#elem {
  column-gap: normal;
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Beispiel

Lassen Sie uns den Abstand zwischen Spalten im Grid festlegen:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

Beispiel

Lassen Sie uns nun den Abstand zwischen Spalten in % festlegen:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 5%;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

Siehe auch