Eigenschaft grid-template

Die Eigenschaft grid-template legt die Anzahl und Breite der Zeilen und Spalten fest, die ein Element im Grid oder Raster einnimmt und ist eine Kurzform der Eigenschaften grid-template-rows und grid-template-columns. Die Zeilen und Spalten, auf denen das Element platziert wird, werden durch einen Schrägstrich getrennt. Die Eigenschaft grid-template wird im übergeordneten Element angegeben und bestimmt die Anordnung der untergeordneten Elemente. Im Wert der Eigenschaft geben wir die Breite der Zeilen oder Spalten in beliebigen Einheiten für Größen an.

Bei der Angabe von Werten in Pixel in den Eigenschaften entsprechen die Größen der Elemente genau diesen. Wenn wir das Wort auto angeben, werden die Spalten und Zeilen den gesamten verfügbaren Platz ausfüllen. Die Verwendung der Einheit fr (Fraktion) bedeutet, dass der gesamte Platz in gleiche Teile aufgeteilt wird. Der Vorteil von fr ist seine Anpassungsfähigkeit an verschiedene Container oder Bildschirmauflösungen, da fr den Platz einfach in die angegebene Anzahl von Fraktionen aufteilt, ohne an eine genaue Pixelgröße gebunden zu sein.

Syntax

Selektor {
	grid-template: Breite und Anzahl der Zeilen / Breite und Anzahl der Spalten;
}

Beispiel

Lassen Sie uns mit der Eigenschaft grid-template eine Tabelle erstellen:

<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: 1fr 1fr 1fr / 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 nun der zweiten und dritten Zeile die gleiche Breite geben und jeder Spalte eine unterschiedliche Breite zuweisen:

<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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Lassen Sie uns nun in der Tabelle aus dem vorherigen Beispiel die obere Zeile zwei Fraktionen breit machen, 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: 2fr 1fr 1fr / 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,
die eine Kurzschreibweise für die Eigenschaften der Spalten und Zeilen angibt
die Eigenschaft grid-template-rows,
die die Anzahl und Breite der Zeilen im Grid festlegt
die Eigenschaft grid-template-columns,
die die Anzahl und Breite der Spalten im Grid festlegt