CSS grid-template-Eigenschaft
Die grid-template-Eigenschaft definiert die Grid-Spalten, -Zeilen und -Bereiche. Sie ist eine Shorthand-Eigenschaft für die folgenden Eigenschaften:
Die grid-template-Eigenschaft legt die Zeilen und Spalten fest, getrennt durch einen Schrägstrich.
INFO
Die grid-template-Eigenschaft hat keinen Einfluss auf durchreichende Ränder (Gaps).
Die CSS-Grid-Shorthand-Eigenschaft setzt andere Grid-Eigenschaften (wie grid-auto-rows und grid-gap) auf ihre Anfangswerte zurück. Wenn Sie nur Zeilen, Spalten und Bereiche festlegen möchten, ohne andere Grid-Eigenschaften zu beeinflussen, verwenden Sie stattdessen grid-template anstelle von grid.
| Anfangswert | none |
|---|---|
| Gilt für | Grid-Container. |
| Vererbt | Nein. |
| Animierbar | Ja. Das Grid-Layout ist animierbar. |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | object.style.gridTemplate ="100px / auto auto"; |
Syntax
CSS grid-template-Syntax
grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | <grid-template-areas> | initial | inherit;Beispiel für die grid-template-Eigenschaft:
CSS grid-template-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template: 170px / auto auto auto;
grid-gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template 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>
</body>
</html>Ergebnis
Beispiel für die grid-template-Eigenschaft, bei der einem Grid-Element der Name „item1“ zugewiesen wird:
CSS grid-template weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
grid-area: item1;
}
.grid-container {
display: grid;
grid-template: 'item1 item1 . .' 'item1 item1 . .';
grid-gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| none | Es wird keine Größe definiert. Dies ist der Standardwert dieser Eigenschaft. | - |
| grid-template-rows / grid-template-columns | Legt die Größe der Zeilen und Spalten fest. | Testen » |
| grid-template-areas | Legt das Grid-Layout unter Verwendung benannter Elemente fest. Syntax: <string>+ | Testen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | - |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. | - |
Praxis
Wofür steht die 'grid-template'-Eigenschaft in CSS?