CSS/Eigenschaften/row-gap

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

erlaubte Werte
  • Längenangabe oder Prozentwert
  • Prozentwert
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: 0
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 25em;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 1em;
}
Zwischen den Reihen wird ein gutter (engl. für Rinne), d. h. ein Abstand von 1em zwischen den einzelnen Reihen festgelegt.
Beachten Sie: Wenn kein Wert für row-gap festgelegt wird, wird der Wert von column-gap übernommen.
Empfehlung: Verwenden Sie für eine Übergangszeit weiterhin die grid-row-gap-Eigenschaft!

Weblinks

Siehe auch