CSS grid-template-columns Eigenschaft
Die CSS-Eigenschaft grid-template-columns definiert Anzahl und Breite von Spalten im Grid-Layout. Alle Werte mit Beispielen erklärt.
Die Eigenschaft grid-template-columns legt die Anzahl der Spalten in einem CSS Grid-Layout sowie die Breite (Track-Größe) jeder einzelnen Spalte fest. Sie wird am Grid-Container — dem Element mit display: grid — gesetzt, und jeder Wert in der Liste erstellt einen expliziten Spalten-Track.
Diese Seite behandelt die Track-Sizing-Schlüsselwörter und -Funktionen, die übergeben werden können (fr, repeat(), minmax(), auto, fit-content()), wann welche verwendet werden sollte und häufige Fehlerquellen. Das Gegenstück für Zeilen ist grid-template-rows; um Spalten und Zeilen gemeinsam zu definieren, siehe grid-template.
| Anfangswert | none |
|---|---|
| Gilt für | Grid-Container. |
| Vererbbar | Nein. |
| Animierbar | Ja. Spalten sind animierbar. |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | object.style.gridTemplateColumns = "40px 40px 40px"; |
Syntax
CSS grid-template-columns
grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;Beispiel der grid-template-columns-Eigenschaft:
CSS grid-template-columns Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
background-color: #ccc;
padding: 10px;
margin-top: 20px;
}
.example > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-columns property example</h2>
<div class="example">
<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>
</body>
</html>Hier erstellt 1fr 1fr 1fr 1fr vier gleichbreite Spalten. Die fr-Einheit („Fraktion") verteilt den verbleibenden Platz im Container nach Abzug der Abstände, sodass die vier Tracks unabhängig von der Bildschirmbreite immer gleich breit bleiben. Die acht Elemente laufen auf zwei implizite Zeilen über, da nur vier Spalten definiert sind.
Ergebnis
Beispiel von grid-template-columns angewendet auf einen Grid-Container:
CSS grid-template-columns Längenbeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 40px 150px auto 80px;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-columns property example</h2>
<div class="grid-container">
<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>
</body>
</html>Die Mischung aus festen und flexiblen Tracks ist das häufigste Muster in der Praxis. Im obigen Beispiel ist die erste Spalte exakt 40px breit, die zweite 150px, die vierte 80px, und die dritte (auto) nimmt den verbleibenden Platz ein.
Track-Sizing-Schlüsselwörter und -Funktionen
Spalten werden selten alle einzeln aufgelistet. Diese Schlüsselwörter und Funktionen machen den Wert kürzer und responsiver.
repeat() — Wiederholungen vermeiden
repeat(count, size) erzeugt count Tracks der angegebenen Größe. grid-template-columns: repeat(4, 1fr) ist identisch mit 1fr 1fr 1fr 1fr. In Kombination mit auto-fill/auto-fit fügt es so viele Tracks ein, wie der Container erlaubt — die Grundlage responsiver Karten-Grids:
/* As many 200px+ columns as fit; each grows to fill the row. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));minmax() — Mindest- und Höchstgröße festlegen
minmax(min, max) lässt einen Track zwischen zwei Grenzen wachsen und schrumpfen. minmax(200px, 1fr) wird nie schmaler als 200px, dehnt sich aber aus, um verbleibenden Platz zu teilen. Damit wird verhindert, dass Spalten auf kleinen Bildschirmen kollabieren.
fr — verbleibenden Platz aufteilen
Die fr-Einheit verteilt den Platz, der nach festen Größen und Abständen übrig bleibt. 2fr 1fr macht die erste Spalte doppelt so breit wie die zweite. Anders als Prozentwerte berücksichtigt fr den Abstand bereits, sodass Spalten den Container nicht überlaufen.
auto, max-content, min-content, fit-content()
auto passt einen Track an seinen Inhalt an, lässt ihn aber wachsen; max-content macht ihn so breit wie der längste ununterbrochene Inhalt; min-content schrumpft ihn auf das Minimum, das der Inhalt erlaubt; fit-content(300px) verhält sich wie auto, überschreitet jedoch nie die angegebene Obergrenze.
Gemeinsam ausprobieren
<!DOCTYPE html>
<html>
<head>
<title>grid-template-columns with repeat and minmax</title>
<style>
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.cards > div {
background-color: #6b9b37;
color: #fff;
text-align: center;
padding: 30px 0;
font-size: 24px;
}
</style>
</head>
<body>
<h2>Responsive columns</h2>
<div class="cards">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Die Vorschau verändert beim Größenändern die Spaltenanzahl automatisch, während jede Karte mindestens 120px breit bleibt.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Dies ist der Standardwert der Eigenschaft. | Ausprobieren » |
| auto | Die Track-Größe wird durch den Inhalt bestimmt, kann aber wachsen, um verfügbaren Platz zu füllen. | Ausprobieren » |
| max-content | Die Größe jeder Spalte richtet sich nach dem größten Element in der Spalte. | Ausprobieren » |
| min-content | Die Größe jeder Spalte richtet sich nach dem kleinsten Element in der Spalte. | Ausprobieren » |
| minmax(min, max) | Der Größenbereich ist größer oder gleich „min" und kleiner oder gleich „max". | Ausprobieren » |
<length> | Die Spaltengröße wird durch einen Längenwert angegeben. | Ausprobieren » |
<percentage> | Die Spaltengröße wird in Prozent angegeben. | Ausprobieren » |
<flex> | Eine nicht-negative Dimension mit der Einheit „fr", die den Flex-Faktor des Tracks angibt. Jeder <flex>-Track teilt den verbleibenden Platz proportional zu seinem Flex-Faktor. | Ausprobieren » |
| fit-content | Entspricht min(max-content, max(auto, argument)), ähnlich wie auto (d. h. minmax(auto, max-content)), aber die Größe ist größer als das auto-Minimum. | Ausprobieren » |
| repeat | Stellt ein wiederholtes Fragment der Track-Liste dar und ermöglicht es, eine große Anzahl von Spalten mit wiederkehrendem Muster kompakter zu schreiben. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. | Ausprobieren » |
Verwandte Eigenschaften
grid-template-rows— dasselbe Konzept für horizontale Tracks (Zeilen).grid-template-areas— Bereiche des Grids benennen und Elemente nach Namen platzieren.grid-template— Kurzschreibweise, die Zeilen, Spalten und Bereiche auf einmal festlegt.grid-auto-columns— legt die Größe impliziter Spalten fest, die über das explizite Template hinaus erstellt werden.grid— die vollständige Kurzschreibweise für eine gesamte Grid-Definition.