Eigenschaft grid-template-rows
Die Eigenschaft grid-template-rows legt
die Anzahl und Breite der Zeilen fest, die
ein Element im Grid oder Raster einnimmt.
Im Wert der Eigenschaft geben wir die Breite der Zeilen
in beliebigen Einheiten
für Größen an.
Die Eigenschaft wird im Elternelement angegeben
und bestimmt die Breite der Zeilen der Kindelemente.
Bei der Angabe von Werten in Pixel in den Eigenschaften
entsprechen die Zeilengrößen genau diesen.
Wenn wir das Wort auto angeben, werden die Zeilen
den gesamten verfügbaren Platz ausfüllen. Die Verwendung
der Einheit fr (Fraktion) bedeutet,
dass der gesamte Raum in gleiche Teile
aufgeteilt wird. Der Vorteil von
fr ist seine Anpassungsfähigkeit an
verschiedene Container oder Bildschirmauflösungen,
da fr diese einfach in die angegebene
Anzahl von Fraktionen aufteilt, ohne an eine genaue Pixelgröße gebunden zu sein.
Syntax
Selektor {
grid-template-rows: Zeilenbreite;
}
Beispiel
Lassen Sie uns die Zeilenbreite für unsere Elemente im Grid festlegen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Lassen Sie uns der ersten und dritten Zeile eine feste Breite in Pixeln zuweisen, und die zweite Zeile soll den verfügbaren Platz automatisch ausfüllen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Und jetzt mit der Eigenschaft
grid-template-rows
sorgen wir dafür, dass die erste und zweite
Zeile einen Teil des Containers einnehmen,
und die dritte Zeile - drei Teile:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Werte, die in fr-Einheiten angegeben sind,
können gebrochene Werte annehmen. Lassen Sie uns
das vorherige Beispiel ändern, indem wir
für die zweite und dritte Zeile die Breite
in gebrochenen Zahlen angeben:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Lassen Sie uns in der Eigenschaft grid-template-rows
die Funktion repeat() angeben,
die dem Container mitteilt, dass alle
drei Zeilen die gleiche Breite haben sollen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Und jetzt lassen Sie uns das vorherige Beispiel so ändern, dass zu den drei gleichen Zeilen eine vierte hinzugefügt wird, die zwei Fraktionen des Containers einnimmt:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Lassen Sie uns den ersten beiden Zeilen eine Breite von einer Fraktion des Containers zuweisen, und den letzten beiden Zeilen - zwei Fraktionen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Und jetzt lassen Sie uns die Zeilenbreite festlegen,
indem wir Werte kombinieren, die mit der
Funktion repeat() und freien Einheiten fr angegeben sind:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Auch in der Funktion repeat() kann
der Wert auto-fill angegeben werden, der
unseren Container mit gleichen Zeilen der gewünschten Breite füllt:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Sehr praktisch ist es, auto-fill
zusammen mit der Funktion minmax anzugeben,
die einen Bereich der Zeilenbreiten
vom minimalen bis zum maximalen Wert festlegt.
Wenn die Containerbreite nicht alle
Zeilen aufnehmen kann, werden einige davon
in eine neue Zeile verschoben, wobei die Zeilen in der Zeile
sich gleichmäßig darin verteilen. Lassen Sie uns das
vorherige Beispiel ändern, indem wir die Funktion minmax angeben:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Lassen Sie uns nun die Eigenschaft auto-fit angeben,
deren Unterschied zu auto-fill darin besteht,
dass sie die Anzahl der Zeilen an die
verfügbare Breite des Containers anpasst, indem sie sie erweitert oder
staucht:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Neben fr können auch
Werte in % verwendet werden, die ebenfalls bestimmen,
welchen Teil des Containers eine Zeile einnimmt.
Dabei wird zunächst die Größe
der Zeile in % berechnet, und der verbleibende freie Raum
wird in Fraktionen aufgeteilt:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Lassen Sie uns die Eigenschaften
grid-template-columns und
grid-template-rows zusammen verwenden:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Lassen Sie uns mit den Eigenschaften
grid-template-columns und
grid-template-rows
eine Tabelle aus neun Zellen erstellen, die
in drei Zeilen angeordnet sind. Dabei sollen die zweite und dritte Zeile die gleiche Breite haben,
und jede Spalte - eine unterschiedliche Breite:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Beispiel
Und jetzt in der Tabelle aus dem vorherigen Beispiel machen wir die obere Zeile zwei Fraktionen breit, und die erste Spalte - eine halbe Fraktion:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Siehe auch
-
die Eigenschaft
grid-template-columns,
die die Anzahl und Breite der Spalten im Grid festlegt -
die Eigenschaft
grid-auto-rows,
die die Anzahl und Breite der Zeilen im impliziten Grid festlegt
