CSS grid-area-Eigenschaft
Die grid-area-Eigenschaft wird verwendet, um die Größe und den Standort des Rasterelements innerhalb des Rastercontainers festzulegen. Sie ist eine Kurzschreibweise (Shorthand) für die folgenden Eigenschaften, die in der Reihenfolge angewendet werden: row-start, column-start, row-end, column-end:
- grid-row-start, gibt die Zeile an, in der das Element beginnen soll.
- grid-column-start, gibt die Spalte an, in der das Element beginnen soll.
- grid-row-end, gibt die Zeile an, in der das Element enden soll.
- grid-column-end, gibt die Spalte an, in der das Element enden soll.
Die grid-area-Eigenschaft weist einem Rasterelement auch einen Namen zu. Benannte Rasterelemente können anschließend von der grid-template-areas-Eigenschaft des Rastercontainers referenziert werden.
| Anfangswert | auto / auto / auto / auto |
|---|---|
| Gilt für | Rasterelemente. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | element.style.gridArea = "1 / 2 / span 2 / span 3"; |
Syntax
grid-area: <grid-line> / <grid-line> / <grid-line> / <grid-line> | <custom-ident> | initial | inherit;Hinweis: Die Kurzschreibweise akzeptiert 1 bis 4 Werte. Wenn weniger als 4 Werte angegeben werden, werden fehlende Werte standardmäßig auf
autogesetzt. Das Schlüsselwortspankann für die Endwerte verwendet werden (z. B.span 2).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 {
grid-area: header;
}
.box2 {
grid-area: left;
}
.box3 {
grid-area: main;
}
.box4 {
grid-area: right;
}
.box5 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'left main main main right right' 'left footer footer footer footer footer';
gap: 5px;
background-color: #555;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-area property example</h2>
<p>You can use the grid-area property to name grid items.</p>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Left</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Ergebnis
Im folgenden Beispiel wird dem Element box1 der Wert itemname zugewiesen, der sich über alle fünf im Rastervorlagen definierten Spalten erstreckt. Beachten Sie, dass die verbleibenden Elemente aufgrund der nur 5 definierten Spalten automatisch in die nächste Zeile fließen (implizite Rasterplatzierung).
Beispiel mit itemname-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 {
grid-area: itemname;
}
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-areas: 'itemname itemname itemname itemname itemname';
gap: 5px;
background-color: #8ebf42;
padding: 5px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-area property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
<grid-line> | Gibt die Rasterlinie an, an der das Element beginnt oder endet. Akzeptiert eine Zahl, span <number> oder auto. |
custom-ident | Gibt einen Namen für das Element an (wird mit grid-template-areas verwendet). |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Was ist der Zweck der CSS-Eigenschaft 'grid-area'?