Grid ist eine andere, flexible Layout-Methode in CSS, die die Anordnung und Ausrichtung von Elementen erlaubt, die in Reihen und Spalten angeordnet sind. Sie ist besonders nützlich, wenn Sie komplexere Layouts erstellen müssen, z.B. Tabellen, Karten oder Layouts mit mehreren Spalten. Grid erlaubt es, komplexere Raster zu erstellen und die Positionierung von Elementen in mehrdimensionalen Räumen. In diesem Beispiel werden wir ein Grid mit vier Spalten und drei Zeilen erstellen und die Elemente an verschiedenen Positionen platzieren:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
height: 300px;
border: 1px solid black;
}
.item {
background-color: lightblue;
margin: 5px;
padding: 20px;
grid-column: 2 / 4; /* Hier können Sie die Positionen anpassen */
grid-row: 2 / 4;
}