CSS Grid

CSS Grid Layout, oft einfach als CSS Grid bezeichnet, ist eine zweidimensionale Layout-Technik, die es Webdesignern und -entwicklern ermöglicht, komplexe und flexible Layouts für Webseiten und Webanwendungen zu erstellen. Im Gegensatz zu anderen Layout-Methoden wie Flexbox, die sich auf eine Dimension konzentrieren (entweder Zeilen oder Spalten), ermöglicht CSS Grid die gleichzeitige Manipulation von Zeilen und Spalten, wodurch umfassendere Layouts möglich sind.

Ein CSS Grid besteht aus einem Container-Element, das das Grid definiert, und den darin enthaltenen Grid-Elementen, die als Grid-Items bezeichnet werden. Um ein Grid-Layout zu erstellen, wird das CSS-Attribut display: grid; auf das Container-Element angewendet. Zeilen und Spalten können dann mit den Eigenschaften grid-template-rows und grid-template-columns definiert werden, die die Größe und Anzahl der Zeilen bzw. Spalten im Grid festlegen. Beispielsweise:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 1fr 3fr;
}

In diesem Beispiel erstellen wir ein Grid mit drei Zeilen und zwei Spalten. Die Größenangaben in fr-Einheiten (Fractional Units) teilen den verfügbaren Raum innerhalb des Containers in gleichmäßige Anteile auf.

Grid-Items werden automatisch innerhalb des Grids platziert, aber sie können auch explizit platziert werden, indem die Eigenschaften grid-row und grid-column auf das jeweilige Grid-Item angewendet werden. Mit diesen Eigenschaften können Start- und Endpositionen für das Grid-Item innerhalb des Grids festgelegt werden.

Darüber hinaus bietet CSS Grid eine Vielzahl von weiteren Funktionen, wie z. B. automatische Platzierung, Grid-Gap zur Festlegung von Abständen zwischen Grid-Items, Grid-Areas zur Vereinfachung der Layouterstellung und die Möglichkeit, Grids innerhalb von Grids zu verschachteln.

CSS Grid ist eine leistungsstarke Layout-Technik, die die Erstellung von responsiven, adaptiven und komplexen Layouts für Webseiten und Webanwendungen erheblich vereinfacht. Da es sich um eine native CSS-Funktion handelt, ist es in allen modernen Browsern gut unterstützt und kann leicht in Kombination mit anderen Layout-Techniken wie Flexbox oder CSS-Positionierung verwendet werden.