grid-gap
ist die shorthand CSS Eigenschaft für grid-row-gap
und grid-column-gap
, welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.
/* Ein <Länge> Wert */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;
/* Ein <Prozent> Wert */
grid-gap: 16%;
grid-gap: 100%;
/* Zwei <Länge> Werte */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;
/* Ein or zwei <Prozent> Werte */
grid-gap: 16% 100%;
grid-gap: 21px 82%;
/* Globale Werte */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | multi-column elements, flex containers, grid containers |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Syntax
Dieser Eigenschaft wird ein Wert für <'grid-row-gap'>
zugeordnet, gefolgt von einem optionalen Wert für <'grid-column-gap'>
. Falls <'grid-column-gap'>
ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <'grid-row-gap'>
.
<'grid-row-gap'>
und <'grid-column-gap'>
werden jeweils angegeben als <Länge>
or als <Prozent>
.
Werte
<Länge>
- Gibt die Breite der Spalte an, welche die Grid-Linien trennt.
<Prozent>
- Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.
Formale Syntax
Beispiel
HTML Inhalt
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS Inhalt
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 20px 5px;
}
#grid > div {
background-color: lime;
}
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Grid Layout Die Definition von 'grid-gap' in dieser Spezifikation. |
Anwärter Empfehlung | Erste Definition |
Siehe auch
- Related CSS properties:
grid-row-gap
,grid-column-gap
- Grid Layout Guide: Basic concepts of grid layout - Gutters