grid-row
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Oktober 2017.
Die grid-row CSS Kurzform-Eigenschaft legt die Größe und Position eines Grid-Items innerhalb einer Gitternetz-Zeile fest, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu dessen Platzierung im Gitternetz beiträgt und dadurch die Randanfänge und Ränder seines Gitternetz-Bereichs spezifiziert.
Probieren Sie es aus
grid-row: 1;
grid-row: 1 / 3;
grid-row: 2 / -1;
grid-row: 1 / span 2;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">One</div>
<div>Two</div>
<div>Three</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 200px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
Bestandteil-Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;
/* <custom-ident> values */
grid-row: some-grid-area;
grid-row: some-grid-area / some-other-grid-area;
/* <integer> + <custom-ident> values */
grid-row: some-grid-area 4;
grid-row: 4 some-grid-area / 6;
/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span some-grid-area;
grid-row: 5 some-grid-area span;
grid-row: span 3 / 6;
grid-row: span some-grid-area / span some-other-grid-area;
grid-row: 5 some-grid-area span / 2 span;
/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;
Diese Eigenschaft wird als ein oder zwei <grid-line> Werte angegeben.
Wenn zwei <grid-line> Werte angegeben sind, werden sie durch / getrennt. Die ausführliche Form grid-row-start wird auf den Wert vor dem Schrägstrich gesetzt und die ausführliche Form grid-row-end auf den Wert nach dem Schrägstrich.
Jeder <grid-line> Wert kann angegeben werden als:
- entweder das Schlüsselwort
auto - oder ein
<custom-ident>Wert - oder ein
<integer>Wert - oder beides
<custom-ident>und<integer>, getrennt durch ein Leerzeichen - oder das Schlüsselwort
spanzusammen mit entweder einem<custom-ident>oder einem<integer>oder beidem.
Werte
auto-
Ist ein Schlüsselwort, das angibt, dass die Eigenschaft nichts zur Platzierung des Grid-Items beiträgt, was eine automatische Platzierung, eine automatische Spanne oder eine Standardspanne von
1bedeutet. <custom-ident>-
Wenn es eine benannte Linie mit dem Namen
<custom-ident>-start/<custom-ident>-endgibt, trägt es die erste solche Linie zur Platzierung des Grid-Items bei.Hinweis: Benannte Gitterbereiche erzeugen automatisch implizite benannte Linien dieser Form, daher wird durch die Angabe von
grid-row: foo;der Anfangs-/Endrand dieses benannten Gitterbereichs gewählt (es sei denn, es wurde zuvor explizit eine andere Linie namensfoo-start/foo-endangegeben).Andernfalls wird dies behandelt, als wäre die ganze Zahl
1zusammen mit dem<custom-ident>angegeben worden. <integer> && <custom-ident>?-
Trägt die n-te Gitterlinie zur Platzierung des Grid-Items bei. Wenn eine negative ganze Zahl angegeben ist, zählt sie stattdessen rückwärts, beginnend vom Endrand des expliziten Gitters.
Wenn ein Name als
<custom-ident>angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gitterlinien diesen Namen für den Zweck der Positionssuche haben.Ein
<integer>Wert von0ist ungültig. span && [ <integer> || <custom-ident> ]-
Trägt eine Gitterspanne zur Platzierung des Grid-Items bei, sodass der entsprechende Rand des Gitterbereichs des Grid-Items n Linien vom gegenüberliegenden Rand entfernt ist.
Wenn ein Name als
<custom-ident>angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gitterlinien auf der Seite des expliziten Gitters, die der Suchrichtung entspricht, diesen Namen für den Zweck der Zählung dieser Spanne haben.Wenn das
<integer>weggelassen wird, ist der Standardwert1. Negative Ganzzahlen oder 0 sind ungültig.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | Gridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | diskret |
Formale Syntax
grid-row =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
Beispiele
Einstellen der Größe und Position der Gitterzeile
HTML
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
CSS
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(6, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-row: 2 / 4;
}
#item3 {
background-color: blue;
grid-row: span 2 / 7;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Grid Layout Module Level 2 # placement-shorthands |