CSS/Eigenschaften/gap

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Grid-gap)
Wechseln zu: Navigation, Suche
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

row-gap column-gap

Die Angabe für column-gap kann weggelassen werden, der angegebene Wert gilt dann für Zeilen- und Spaltenabstand.

Zulässig pro Wert ist

  • eine nicht negative Längenangabe
  • eine Prozentangabe
  • normal: Dies entspricht in Flexbox und Grid einem Abstand von 0px, in einem Mehrspaltenlayout dagegen einem Spaltenabstand von 1em (einen Zeilenabstand gibt es hier nicht).
Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert

normal

anwendbar auf

alle Elemente

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.

Siehe auch

Weblinks