Glossar App Entwicklung

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.