CSS grid-column-gap-Eigenschaft

Die Eigenschaft grid-column-gap legt die Größe des Abstands zwischen den Spalten in einem CSS-Grid-Layout fest.

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

Warnung
Die Eigenschaft grid-column-gap ist veraltet. Verwenden Sie stattdessen die moderne column-gap Eigenschaft oder die Kurzschreibweise gap. Negative Werte sind nicht erlaubt.

Anfangswert	0
Gilt für	Grid-Container.
Vererbbar	Nein.
Animierbar	Ja. Der Abstand ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridColumnGap = "30px";

Syntax

Syntax der CSS grid-column-gap-Eigenschaft

css

grid-column-gap: length;

Beispiel für die grid-column-gap-Eigenschaft:

Beispiel für die CSS grid-column-gap-Eigenschaft mit Längenwert

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Grid-column-gap property example</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>

Try it Yourself »

Ergebnis

CSS grid-column-gap Property

Beispiel für die grid-column-gap-Eigenschaft mit "%" -Wert:

Beispiel für die CSS grid-column-gap-Eigenschaft mit % -Wert

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Grid-column-gap property example</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>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
length	Der Abstand zwischen den Spalten wird in Pixeln oder Prozent angegeben. Negative Werte sind nicht erlaubt.	Testen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was ist der Zweck der 'column-gap'-Eigenschaft im CSS-Grid-Layout?

Es legt die Größe des Abstands zwischen den Spalten fest.Es legt die Größe des Abstands zwischen den Zeilen fest.Es bestimmt die Farbe der Gitterlinien.Vor der Einführung der 'gap'-Eigenschaft wurde 'column-gap' verwendet, um Abstände zu erstellen.Es richtet Gitterelemente entlang der Spaltenachse aus.

CSS grid-column-gap-Eigenschaft ​

Syntax ​

Beispiel für die grid-column-gap-Eigenschaft: ​

Ergebnis ​

Beispiel für die grid-column-gap-Eigenschaft mit "%" -Wert: ​

Werte ​