row-gap (grid-row-gap)
Die CSS-Eigenschaft row-gap
legt die Größe der Zwischenräume (gutter) zwischen den Grid-Reihen eines Elements fest.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt Interaktive Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns einen Pull-Request.
CSS Grid Layout definierte zunächst die Eigenschaft grid-row-gap
}. Diese vorangestellte Eigenschaft wird durch row-gap
ersetzt. Um jedoch Browser zu unterstützen, die grid-row-gap
und nicht row-gap
für grid implementiert haben, müssen Sie die Eigenschaft mit Präfix verwenden, wie im obigen interaktiven Beispiel.
Syntax
/* <length> Längen-Werte */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
/* <percentage> Prozent-Werte*/
row-gap: 10%;
/* Globale Werte */
row-gap: inherit;
row-gap: initial;
row-gap: unset;
Values
<length-percentage>
- Ist die Breite des Abstands (
gutter
) zwischen den Reihen.<percentage>
Werte sind relativ zur Dimension des Elements.
Formal syntax
normal | <length-percentage>wobei
<length-percentage> = <length> | <percentage>
Examples
Flex layout
Experimental
Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.
HTML
<div id="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
#flexbox {
display: flex;
flex-wrap: wrap;
width: 300px;
row-gap: 20px;
}
#flexbox > div {
border: 1px solid green;
background-color: lime;
flex: 1 1 auto;
width: 100px;
height: 50px;
}
Result
Grid layout
HTML
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
CSS
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(3, 1fr);
row-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
Result
Specifications
Spezifikation | Status | Bemerkung |
---|---|---|
CSS Box Alignment Module Level 3 Die Definition von 'row-gap' in dieser Spezifikation. |
Arbeitsentwurf | Erstdefinition |
Initialwert | normal |
---|---|
Anwendbar auf | multi-column elements, flex containers, grid containers |
Vererbt | Nein |
Prozentwerte | beziehen sich auf die entsprechende Dimension des Inhaltsbereichs |
Berechneter Wert | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Browser-Kompatibilität
Support in Flex layout
BCD tables only load in the browser
Support in Grid layout
BCD tables only load in the browser
Siehe auch
- Verwandte CSS-Eigenschaften:
column-gap
,gap
- Grid Layout Anleitung: Basic concepts of grid layout - Gutters