Zeilenabstand | CSS-Tricks

Die CSS-Eigenschaft row-gap legt den Abstand (formal als „Laufstegabstand“ bezeichnet) zwischen Zeilen in CSS Grid-, Flexbox- und CSS-Spaltenlayouts fest.

Sie können sich row-gap als die „nächste Generation“ oder den Nachfolger von grid-row-gap vorstellen, der ursprünglich in der CSS Grid Layout-Spezifikation definiert wurde. Um dieses Merkmal von Grid zu erweitern, sodass es auch für Flexbox und Spalten gilt, wurde das Präfix grid- entfernt. Dadurch ist es weniger spezifisch für Grid.

Es ist jedoch auch ein wenig umständlich, wenn Sie grid-row-gap (sowie grid-gap und grid-column-gap) bereits verwendet haben, da wir die Präfix-Version unterstützen müssen, bis jeder Browser den Wechsel vollzogen hat. Die zukunftssichere Methode hierfür ist, die präfixierte Eigenschaft *vor* row-gap zu deklarieren. Auf diese Weise verwenden Browser, die sie unterstützen, diese, und diejenigen, die dies nicht tun, gehen zur nächsten Stufe über und erhalten, was sie brauchen.

.something {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 2rem; /* Will be used instead by browsers that do not support `row-gap` */
  row-gap: 2rem; /* Used by browsers that support `row-gap` */
}

Syntax

row-gap: normal | <length-percentage>

Anfangswert: normal
Gilt für: Mehrspaltige Container, Flex-Container, Grid-Container
Vererbt: nein
Prozente: Beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wert: Schlüsselwort, andernfalls ein berechneter <Länge-Prozentwert>-Wert
Animationstyp: nach berechnetem Werttyp

Diese Syntax bedeutet, dass row-gap einen Wert von normal (der Standardwert) oder eine bestimmte Länge in Einheiten (z. B. 40px) oder einen Prozentsatz (z. B. 5%) akzeptiert.

Werte

Abgesehen vom Wert normal akzeptiert row-gap Zahlen und Prozentsätze. „Normal“ bedeutet, was für den Browser standardmäßig ist.

/* Default value */
row-gap: normal;

/* <length> values */
row-gap: 50px;
row-gap: 2rem;
row-gap: 1.5em;
row-gap: 5vw;
row-gap: 25ch;

/* <percentage> value */
row-gap: 15%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;