CSS Grid

CSS Grid ist ein zweidimensionales Layout-System, das es ermöglicht, Layouts sowohl in Zeilen als auch in Spalten zu strukturieren. Im Gegensatz zu anderen Layout-Methoden kann man mit Grid präzise kontrollieren, wo Elemente in einem Raster platziert werden.

Vorteile von CSS Grid.

• Zweidimensionales Layout: Grid arbeitet mit Zeilen und Spalten gleichzeitig

• Präzise Kontrolle: Elemente können exakt positioniert werden

• Flexible Größen: Spalten und Zeilen können feste oder flexible Größen haben

• Überlappende Elemente: Elemente können sich überlagern

• Einfache komplexe Layouts: Auch komplizierte Layouts sind mit wenig Code möglich

Grundkonzept

Grid besteht aus einem Grid-Container und Grid-Items. Der Container wird in Zeilen (rows) und Spalten (columns) unterteilt. Die Linien zwischen den Zellen nennt man Grid-Linien.