Eigenschaft grid-template-columns

Die Eigenschaft grid-template-columns legt die Anzahl und Breite der Spalten fest, die ein Element im Grid oder Raster einnehmen wird. Die Eigenschaft wird im übergeordneten Element angegeben und definiert die Breite der Spalten der untergeordneten Elemente. Im Wert der Eigenschaft geben wir die Spaltenbreiten in beliebigen Größeneinheiten an.

Bei der Angabe von Werten in Pixel in den Eigenschaften entsprechen die Spaltengrößen genau diesen. Wenn wir das Wort auto angeben, füllen die Spalten den gesamten verfügbaren Platz aus. Die Verwendung der Einheit fr (Fraktion) bedeutet, dass der gesamte Platz in gleiche Anteile 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-columns: Spaltenbreite;
}

Beispiel

Lassen Sie uns die Spaltenbreiten 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-columns: 50px 100px 200px 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 Spalte eine feste Breite in Pixeln zuweisen, und die zweite Spalte soll automatisch den verfügbaren Platz ausfüllen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Und jetzt sorgen wir mit der Eigenschaft grid-template-columns dafür, dass die erste und zweite Spalte einen Teil des Containers einnehmen, und die dritte Spalte - drei Teile:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Werte, die in fr-Einheiten angegeben sind, können auch gebrochene Werte annehmen. Lassen Sie uns das vorherige Beispiel ändern, indem wir für die zweite und dritte Spalte die Breite in gebrochenen Zahlen angeben:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Lassen Sie uns in der Eigenschaft grid-template-columns die Funktion repeat() angeben, die dem Container mitteilt, dass alle drei Spalten die gleiche Breite haben sollen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Und jetzt ändern wir das vorherige Beispiel so, dass zu den drei gleichen Spalten 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-columns: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Lassen Sie uns den ersten beiden Spalten eine Breite von einer Fraktion des Containers zuweisen, und den letzten beiden Spalten - zwei Fraktionen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Und jetzt legen wir die Spaltenbreiten fest, 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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Auch in der Funktion repeat() kann man den Wert auto-fill angeben, der unseren Container mit gleichen Spalten 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-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Sehr praktisch ist es, zusammen mit auto-fill die Funktion minmax anzugeben, die einen Bereich der Spaltenbreiten vom minimalen bis zum maximalen Wert festlegt. Wenn die Containerbreite nicht alle Spalten aufnehmen kann, werden einige davon in eine neue Zeile verschoben, wobei die Spalten in der Zeile sich gleichmäßig darin verteilen. Lassen Sie uns das vorherige Beispiel ändern, indem wir die Funktion minmax angeben. Um verschiedene Platzierungsvarianten der Spalten zu sehen, ändern Sie die Breite Ihres Browserfensters:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 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. Der Unterschied zu auto-fill besteht darin, dass es die Anzahl der Spalten an die verfügbare Containerbreite anpasst, indem es 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-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Neben fr kann man auch Werte in % verwenden, die ebenfalls definieren, welchen Teil des Containers eine Spalte einnehmen wird. Dabei wird zuerst die Größe der Spalte in % berechnet, und der verbleibende freie Platz 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-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 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 Reihen angeordnet sind. Dabei sollen die zweite und dritte Reihe 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 machen wir in der Tabelle aus dem vorherigen Beispiel die obere Reihe 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-rows,
die die Anzahl und Höhe der Zeilen im Grid festlegt
die Eigenschaft grid-auto-columns,
die die Anzahl und Breite der Spalten im impliziten Grid festlegt