CSS grid-area Eigenschaft

Definition und Verwendung

Das grid-area-Attribut für die Abmessungen des Gitterelements und seine Position im Gitterlayout, es ist eine Abkürzung für die folgenden Attribute:

Das grid-area-Attribut kann auch verwendet werden, um Namen für Gitterelemente zu分配. Danach können Sie über den Gittercontainer grid-template-areas Verwenden Sie die Attributbezeichnung für die Gitterprojekte. Siehe untenstehendes Beispiel.

Siehe auch:

CSS-Tutorial:CSS-Grid-Layout

Beispiel

Beispiel 1

Macht "item1" in Zeile 2, Spalte 1 beginnen und über zwei Zeilen und drei Spalten hinweg gehen:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Versuchen Sie es selbst

Hinweis:Mehr Beispiele finden Sie am Seitenende.

CSS-Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Attributwert

Wert Beschreibung
grid-row-start Bestimmt, ab welcher Zeile die Elemente angezeigt werden.
grid-column-start Bestimmt, ab welcher Spalte die Elemente angezeigt werden.
grid-row-end Bestimmt, an welcher Zeilenkante das Projekt angezeigt wird, oder wie viele Zeilen es überspannt.
grid-column-end Bestimmt, an welcher Spaltenkante das Projekt angezeigt wird, oder wie viele Spalten es überspannt.
itemname Definiert das Projekt der Rasterprojekte.

Technische Details

Standardwert: auto / auto / auto / auto
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS Grid Layout Module Level 1
JavaScript-Syntax: object.style.gridArea="1 / 2 / span 2 / span 3"

Mehr Beispiele

Beispiel 2

Item1 wird "myArea" genannt und überspannt alle fünf Spalten in einem Fünfspalten-Rasterlayout:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Versuchen Sie es selbst

Beispiel 3

Machen Sie "myArea" in einem Fünfspalten-Rasterlayout über zwei Spalten hinweg (Punkte bedeuten keine benannten Projekte):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
}

Versuchen Sie es selbst

Beispiel 4

Machen Sie "item1" über zwei Spalten und zwei Zeilen hinweg:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Versuchen Sie es selbst

Beispiel 5

Namen für alle Elemente vergeben und ein fertiges Webseitenvorlagen erstellen:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Versuchen Sie es selbst

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44