CSS -Grid-Container
1
2
3
4
5
6
7
8
Grid-Container
Damit sich ein HTML-Element wie ein Grid-Container verhält, müssen Sie die displayEigenschaft auf
gridoder setzen inline-grid.
Grid-Container bestehen aus Grid-Elementen, die in Spalten und Zeilen platziert werden.
Die grid-template-columns-Eigenschaft
Die grid-template-columnsEigenschaft definiert die Anzahl der Spalten in Ihrem Rasterlayout und kann die Breite jeder Spalte definieren.
Der Wert ist eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Breite der jeweiligen Spalte definiert.
Wenn Sie möchten, dass Ihr Rasterlayout 4 Spalten enthält, geben Sie die Breite der 4 Spalten an, oder "auto", wenn alle Spalten die gleiche Breite haben sollen.
Beispiel
Erstellen Sie ein Raster mit 4 Spalten:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Hinweis: Wenn Sie mehr als 4 Elemente in einem 4-Spalten-Raster haben, fügt das Raster automatisch eine neue Zeile hinzu, um die Elemente einzufügen.
Die grid-template-columnsEigenschaft kann auch verwendet werden, um die Größe (Breite) der Spalten anzugeben.
Beispiel
Legen Sie eine Größe für die 4 Spalten fest:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Die grid-template-rows-Eigenschaft
Die grid-template-rowsEigenschaft definiert die Höhe jeder Zeile.
1
2
3
4
5
6
7
8
Der Wert ist eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Höhe der jeweiligen Zeile definiert:
Beispiel
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Die justify-content-Eigenschaft
Die justify-contentEigenschaft wird verwendet, um das gesamte Raster innerhalb des Containers auszurichten.
1
2
3
4
5
6
Hinweis: Die Gesamtbreite des Rasters muss kleiner sein als die Breite des Containers, damit die justify-contentEigenschaft wirksam wird.
Beispiel
.grid-container {
display: grid;
justify-content: space-evenly;
}
Beispiel
.grid-container {
display: grid;
justify-content: space-around;
}
Beispiel
.grid-container {
display: grid;
justify-content: space-between;
}
Beispiel
.grid-container {
display: grid;
justify-content: center;
}
Beispiel
.grid-container {
display: grid;
justify-content: start;
}
Beispiel
.grid-container {
display: grid;
justify-content: end;
}
Die align-content-Eigenschaft
Die align-contentEigenschaft wird verwendet, um das gesamte Raster innerhalb des Containers
vertikal auszurichten.
1
2
3
4
5
6
Hinweis: Die Gesamthöhe des Rasters muss kleiner sein als die Höhe des Containers, damit die align-contentEigenschaft wirksam wird.
Beispiel
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Beispiel
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Beispiel
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Beispiel
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Beispiel
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Beispiel
.grid-container {
display: grid;
height: 400px;
align-content: end;
}