CSS-Eigenschaft grid-column-gap

Die Eigenschaft grid-column-gap definiert die Größe der Lücke zwischen den Spalten.

Die Länge kann sowohl in Pixeln als auch in Prozent angegeben werden.

Negative Werte sind nicht erlaubt.

Anfangswert	normal
Gilt für	Mehrspaltenelemente, Flexcontainer, Gittercontainer
Geerbt	Nein
Animierbar	Ja, Gap ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridColumnGap = "30px";

Syntax

grid-column-gap: normal | length;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-column-gap: 30px;
      grid-row-gap: 10px;
      background-color: #666;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Grid-column-gap</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Versuch es selber!

In diesem Beispiel ist grid-column-gapdurch Prozentsätze definiert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-column-gap: 20%;
      grid-row-gap: 10px;
      background-color: #666;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Grid-column-gap</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
normal	Verwendet den Standardabstand des Browsers zwischen den Spalten. Das ist der Standardwert dieser Eigenschaft.
length	Der Abstand zwischen den Spalten wird durch px oder Prozentwerte angegeben. Negative Werte sind nicht erlaubt. Der Standardwert ist 0.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.