CSS/Eigenschaften/gap

Die Eigenschaft gap (grid-gap) ist die Zusammenfassung der Eigenschaften row-gap und column-gap, die die gutters (engl. für Rinnen), d. h. die Abstände zwischen den einzelnen Spalten und Reihen festlegt.
Ursprünglich war sie als grid-gap für Grid Layout vorgesehen, ist jetzt aber auch für Flexbox und Mehrspaltenlayout (columns) standardisiert.

erlaubte Werte	siehe Einzelwerte 0 Länge Prozentwert Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: * siehe Einzelwerte row-gap: 0 column-gap: 0
anwendbar auf	alle Elemente (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

#grid {
  display: grid;
  height: 20em;
  grid-gap: 2em 1em;
}

Der erste Wert legt den Abstand zwischen Reihen, der zweite Wert den Abstand zwischen den Spalten fest.

Beachten Sie: Wenn kein Wert für row-gap festgelegt wird, wird der Wert von column-gap übernommen.
Die oben angezeigte Broswerunterstützung gilt nur für Grid Layout!

Empfehlung: Verwenden Sie für eine Übergangszeit weiterhin die grid-gap-Eigenschaft!

Weblinks

• Spezifikation (CSSWG): grid-gap

Siehe auch

• CSS/Tutorials/Abstand/gap
• CSS/Tutorials/Typografie/Spalten
• CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items Spalten (gutter) mit gap
• CSS/Tutorials/Flexbox/Ausrichtung