CSS Grid-Item

1
2
3
4
5

Probieren Sie es selbst aus

Unterlemente (Projekte)

Ein Gittercontainer enthält Gitterprojekte.

Standardmäßig hat jeder Container in jeder Zeile und jeder Spalte eine Gitterprojekt, aber Sie können den Stil der Gitterprojekte einstellen, damit sie mehrere Spalten und/oder Zeilen überspannen.

grid-column Eigenschaft:

grid-column Diese Eigenschaft definiert, in welchem Spalten das Projekt platziert wird.

Sie können den Anfangs- und Endpunkt des Elements definieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Anmerkung:grid-column Eigenschaften sind die Kurzschreibweisen der grid-column-start- und grid-column-end-Eigenschaften.

Um einen bestimmten Projekt zu platzieren, können Sie die Zeilennummern (line numbers) verwenden oder den Schlüsselwort "span" verwenden, um zu definieren, wie viele Spalten das Projekt überspannen soll.

Beispiel

Macht "item1" von der 1. Spalte anfangen und vor der 5. Spalte enden:

.item1 {
  grid-column: 1 / 5;
}

Probieren Sie es selbst aus

Beispiel

Macht "item1" von der 1. Spalte anfangen und 3 Spalten überspannen:

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

Probieren Sie es selbst aus

Beispiel

Macht "item2" von der 2. Spalte anfangen und 3 Spalten überspannen:

.item2 {
  grid-column: 2 / span 3;
}

Probieren Sie es selbst aus

grid-row Attribut:

grid-row Das Attribut definiert, in welcher Reihe das Element platziert wird.

Sie können den Anfangs- und Endpunkt des Elements definieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Anmerkung:grid-row Das Attribut ist eine Abkürzung für die Attribute grid-row-start und grid-row-end.

Um Elemente zu platzieren, können Sie die Zeilennummer referenzieren oder das Schlüsselwort "span" verwenden, um zu definieren, wie viele Reihen das Element überspannen soll:

Beispiel

Macht "item1" von row-line 1 anfangen und in row-line 4 enden:

.item1 {
  grid-row: 1 / 4;
}

Probieren Sie es selbst aus

Beispiel

Macht "item1" von der 1. Reihe anfangen und 2 Reihen überspannen:

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

Probieren Sie es selbst aus

grid-area Attribut

grid-area Das Attribut kann als Abkürzung für die Attribute grid-row-start, grid-column-start, grid-row-end und grid-column-end verwendet werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Beispiel

Macht "item8" von row-line 1 und column-line 2 anfangen und enden in row-line 5 und column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Probieren Sie es selbst aus

Beispiel

Macht "item8" von row-line 2 und column-line anfangen und 2 Reihen und 3 Spalten überspannen:

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

Probieren Sie es selbst aus

Benannte Gitterelemente

grid-area Das Attribut kann auch verwendet werden, um Namen für Gitterelemente zu vergeben.

Header
Menü
Hauptteil
Rechts
Footer

Man kann durch den Gittercontainer grid-template-areas Der Attribut wird verwendet, um benannte Gitterelemente zu referenzieren.

Beispiel

Der Name von item1 ist "meineFläche" und erstreckt sich über alle fünf Spalten des Gitterlayouts:

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'meineFläche meineFläche meineFläche meineFläche meineFläche';
}

Probieren Sie es selbst aus

Eine Zeile wird durch Anführungsstriche (' ') definiert.

Die Spalten in jeder Zeile werden in Anführungsstrichen definiert und durch Leerzeichen getrennt.

Anmerkung:Punkte bedeuten keine benannten Gitterprojekte.

Beispiel

Lassen Sie "myArea" über zwei Spalten im Fünfspaltenraster des Gitterlayouts spannen (Punkte bedeuten keine benannten Projekte):

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

Probieren Sie es selbst aus

Um zwei Zeilen zu definieren, geben Sie die Spalten der zweiten Zeile in einer anderen Gruppe von Anführungsstrichen an:

Beispiel

Um "item1" über zwei Spalten und zwei Zeilen zu spannen:

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

Probieren Sie es selbst aus

Beispiel

Namen für alle Elemente vergeben und ein jederzeit verfügbares 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';
}

Probieren Sie es selbst aus

Reihenfolge der Elemente

Das Gitterlayout ermöglicht es uns, Elemente an beliebigen Positionen zu platzieren.

Das erste Element im HTML-Code muss nicht als erstes im Gitter angezeigt werden.

1
2
3
4
5
6

Beispiel

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Probieren Sie es selbst aus

Sie können die Reihenfolge bestimmter Bildschirmgrößen durch die Verwendung von Medienabfragen neu anordnen:

Beispiel

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Probieren Sie es selbst aus