CSS grid-column-gap Eigenschaft
Erfahren Sie, wie die CSS-Eigenschaft grid-column-gap Spaltenabstände in einem Grid-Layout festlegt, mit Werten, Beispielen und dem modernen column-gap-Ersatz.
Die Eigenschaft grid-column-gap legt die Größe des Abstands (des leeren Bereichs) zwischen den Spalten eines CSS Grid-Layouts fest. Sie steuert ausschließlich den horizontalen Abstand zwischen Spaltenspuren — sie fügt niemals Platz an den äußeren Rändern des Grid-Containers hinzu.
Der Wert kann eine feste Länge (wie px, rem oder em) oder ein Prozentwert sein. Bei einem Prozentwert wird dieser relativ zur Inline-Größe (der Breite) des Grid-Containers berechnet.
grid-column-gap ist veraltet. Es war ein früher, grid-spezifischer Name, den Browser seitdem umbenannt haben. Verwenden Sie in neuem Code die moderne Eigenschaft column-gap oder die Kurzschreibweise gap, um Zeilen- und Spaltenabstände gleichzeitig festzulegen. Alle aktuellen Browser akzeptieren grid-column-gap weiterhin als Alias für column-gap, sodass bestehende Layouts funktionsfähig bleiben — aber es gibt keinen Grund, es in neuen Stylesheets zu verwenden.
Warum ein Abstand statt Außenabständen?
Bevor es Gap-Eigenschaften gab, erzeugten Autoren Abstände zwischen Grid-Elementen mit margin und mussten dann den überschüssigen Rand, der an den ersten und letzten Elementen entstand, wieder aufheben. grid-column-gap löst dieses Problem sauber: Der Abstand erscheint nur zwischen den Spaltenspuren, sodass das Grid auf beiden Seiten bündig mit seinem Container abschließt. Der Browser hält den Abstand außerdem konstant, wenn die Spuren wachsen oder schrumpfen — etwas, das Außenabstände nicht garantieren können.
Eigenschaftsreferenz
| Eigenschaft | Wert |
|---|---|
| Anfangswert | normal (entspricht 0 in einem Grid) |
| Gilt für | Grid-Container |
| Vererbbar | Nein |
| Animierbar | Ja |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | object.style.gridColumnGap = "30px" |
Syntax
grid-column-gap: <length-percentage> | normal | initial | inherit;<length-percentage>— ein nicht-negativerpx-,em-,rem-,ch-,vw- oder%-Wert. Negative Werte sind ungültig.normal— der Standardwert des Browsers, der in einem Grid-Kontext zu0aufgelöst wird.initial— setzt die Eigenschaft auf ihren Anfangswert zurück (normal).inherit— übernimmt den berechneten Wert vom Elternelement (selten sinnvoll, dagrid-column-gapnicht vererbt wird).
Beispiele
Fester Abstand in Pixeln (px)
Der häufigste Anwendungsfall: ein fester Pixel-Abstand, der unabhängig von der Containerbreite konstant bleibt.
<!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>Ergebnis
Die zwölf Elemente fließen in vier Spalten; jede Spalte ist durch 30px von der nächsten getrennt, während grid-row-gap: 10px die Zeilen voneinander abgrenzt.
Prozentualer Abstand (%)
Ein Prozentwert wird relativ zur Inline-Größe (Breite) des Grid-Containers berechnet. Die Abstände wachsen und schrumpfen, wenn die Containergröße verändert wird.
<!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>Prozentuale Abstände sind selten das, was man möchte: Bei drei Abständen von je 20% nehmen die Abstände allein 60% des Containers in Anspruch — den vier auto-Spaltenspuren verbleiben nur noch 40%. Feste Längen (px, rem, em) liefern deutlich vorhersehbarere Abstände.
Migration zur modernen Syntax
Der Ersatz ist eine direkte Umbenennung — der Wert bleibt identisch, nur der Eigenschaftsname ändert sich:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Deprecated — avoid in new code */
grid-column-gap: 30px;
/* Modern equivalent */
column-gap: 30px;
/* Or set both axes at once with the gap shorthand */
/* gap: <row-gap> <column-gap>; */
gap: 10px 30px;
}gap: 10px 30px ist gleichwertig mit row-gap: 10px; column-gap: 30px;. Ein einzelner Wert — gap: 30px — wird auf Zeilen und Spalten gleichermaßen angewendet. Die Kurzschreibweise gap funktioniert auch in Flexbox-Containern und ist daher die vielseitigste Wahl.
Wie Abstände mit fr-Einheiten interagieren
Wenn Sie einen Abstand mit fr-Spalten kombinieren, zieht der Browser den gesamten Abstandsplatz von der verfügbaren Breite ab, bevor er die fr-Anteile verteilt. Das bedeutet, die Abstände beeinflussen niemals das Verhältnis zwischen den Spuren:
.grid {
display: grid;
/* Three equal columns; gaps come out of available space first */
grid-template-columns: repeat(3, 1fr);
column-gap: 24px; /* modern equivalent of grid-column-gap: 24px */
}Wenn der Container 300px breit ist und es zwei Abstände von je 24px gibt, werden die verbleibenden 252px gleichmäßig aufgeteilt: Jede Spalte ist 84px breit. Dies ist einer der Gründe, warum fr-Spuren in Kombination mit einem festen column-gap (oder grid-column-gap) vorhersehbarere Layouts ergeben als prozentuale Abstände.
Werte
| Wert | Beschreibung |
|---|---|
<length> | Ein fester Abstand in px, em, rem usw. Negative Werte sind nicht erlaubt. |
<percentage> | Ein Prozentwert der Inline-Größe (Breite) des Grid-Containers. |
normal | Der Browser-Standard, der innerhalb eines Grids 0 entspricht. |
initial | Setzt auf den Anfangswert zurück (normal). |
inherit | Verwendet den berechneten Wert des Elternelements. |
Übungen
Verwandte Eigenschaften
column-gap— der moderne Ersatz für diese Eigenschaft.gap— Kurzschreibweise zum gleichzeitigen Festlegen von Zeilen- und Spaltenabständen.grid-row-gap— die entsprechende Eigenschaft für vertikale Abstände zwischen Zeilen.grid-template-columns— definiert die Spaltenspuren, zwischen denen die Abstände liegen.grid-template-rows— definiert die Zeilenspuren, auf diegrid-row-gapwirkt.grid— die Kurzschreibweise, die ein Element in einen Grid-Container verwandelt.