CSS-Raster-Container

1
2
3
4
5
6
7
8

Probieren Sie es selbst aus

Gittercontainer

Um ein HTML-Element als Gittercontainer zu verwenden, müssen Sie display Diese Eigenschaft wird auf "grid" oder "inline-grid" gesetzt.

Der Gittercontainer besteht aus Gitterelementen, die in den Spalten und Zeilen platziert sind.

Eigenschaft grid-template-columns

grid-template-columns Diese Eigenschaft definiert die Anzahl der Spalten im Gitterlayout und kann die Breite jeder Spalte definieren.

Dieser Wert ist eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Länge der entsprechenden Spalte definiert.

Wenn Sie möchten, dass das Gitterlayout vier Spalten enthält, geben Sie die Breiten dieser vier Spalten an; wenn alle Spalten die gleiche Breite haben sollen, setzen Sie sie auf "auto".

Beispiel

Erstellen Sie ein Gitter mit vier Spalten:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Probieren Sie es selbst aus

Hinweis:Wenn im 4-Spalten-Gitter mehr als 4 Elemente vorhanden sind, fügt das Gitter automatisch neue Zeilen hinzu und platziert diese Elemente darin.

grid-template-columns Diese Eigenschaft kann auch verwendet werden, um die Abmessungen (Breite) der Spalten zu spezifizieren.

Beispiel

Legen Sie die Abmessungen dieser 4 Spalten fest:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Probieren Sie es selbst aus

Eigenschaft grid-template-rows

grid-template-rows Diese Eigenschaft definiert die Höhe jeder Spalte.

1
2
3
4
5
6
7
8

Der Wert ist eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Höhe der entsprechenden Zeile definiert:

Beispiel

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Probieren Sie es selbst aus

Eigenschaft justify-content

justify-content Diese Eigenschaft wird verwendet, um das gesamte Gitter im Container auszurichten.

1
2
3
4
5
6
7
8

Hinweis:Die Gesamtbreite des Gitters muss kleiner als die Breite des Containers sein, damit die Eigenschaft justify-content wirksam ist.

Beispiel

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  justify-content: space-around;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  justify-content: space-between;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  justify-content: center;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  justify-content: start;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  justify-content: end;
}

Probieren Sie es selbst aus

align-content-Eigenschaft

align-content Die Eigenschaft wird verwendet, um den gesamten Raster im Container vertikal auszurichten.

1
2
3
4
5
6
7
8

Hinweis:Die Gesamt Höhe des Gitters muss kleiner als die Höhe des Containers sein, damit die align-content-Eigenschaft生效。

Beispiel

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Probieren Sie es selbst aus

Beispiel

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Probieren Sie es selbst aus