Anzahl und Breite der Zeilen in CSS Grids

Grid-Elemente können auch in Zeilen angeordnet werden. Dafür ist die Eigenschaft grid-template-rows zuständig. Diese Eigenschaft akzeptiert die Größen der Zeilen durch Leerzeichen getrennt. Hier können die gleichen Werte verwendet werden, die wir auch für Spalten kennengelernt haben.

Beispiel

Lassen Sie uns als Beispiel die Blöcke in vier Zeilen anordnen:

<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: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Legen wir für die erste und dritte Zeile eine feste Breite in Pixeln fest, und lassen Sie die zweite Zeile den verbleibenden Platz einnehmen:

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Verwenden wir die Funktion repeat um die Größen der Zeilen anzugeben:

<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: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Weisen wir den Zeilen eine Höhe von 50px zu, und lassen Sie die Anzahl der Zeilen automatisch mit dem Wert auto-fill festlegen:

<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;
}

Praktische Aufgaben

Ordnen Sie die Blöcke in drei Zeilen an. Lassen Sie den ersten Block eine Größe von 100px haben, den zweiten 150px, und den dritten 200px.

Lassen Sie Ihr Grid drei Zeilen haben. Sorgen Sie dafür, dass sie die gleiche Breite haben.