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>

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>

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.

Browser-Support

1.5+ 3.0+ 11.1+


Finden Sie das nützlich?

Ähnliche Artikel