# Konzept

## CSS Grids für Layouts

Das `CSS Grid Layout` Modul von CSS dient dazu, das Definieren von gridbasierten Layouts zu vereinfachen.

## Layouts in CSS

Die Methoden zur Definition von Layouts in CSS haben in den letzten Jahren einen stetigen Wandel durchlebt. Dabei wurden folgende Varianten verwendet:

* Tabellen
* Floats
* Grids und Flexbox

Abhängig des Alters eines Projekts wirst du eine der drei Varianten vorfinden. Wir konzentrieren uns in diesem ÜK auf die modernste Methode mit Grids und Flexbox.

## Was ist ein Grid?

Das Grid ist ein Raster, an dem sich alle Elemente in einem Layout ausrichten.

### Container

Grundlage für jedes Grid ist der `Container`.

![Container](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-0ea456980fdbbce99fe42e443da12d41fab62fa0%2Fabstract-container.png?alt=media)

Der Container fixiert die Breite des Layouts. Die Höhe kann ebenfalls fixiert werden, wird aber üblicherweise flexibel gelassen.&#x20;

### Columns and Rows

Im Container werden beliebig viele Spalten (`Columns`) und Zeilen (`Rows`) definiert. Alle Inhaltselemente richten sich an diesem Raster aus.

![Cols](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-3a2f1eb96e8fb9bcbe6d554aa02c00cc8f72703a%2Fabstract-rows-cols.png?alt=media)

### Gaps

Zwischenräume zwischen `Columns` und `Rows` bezeichnet man als `Gaps`.

![Cols](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-80d973a591743f4accb1fb5a8bcb41a3d200b8b1%2Fabstract-gaps.png?alt=media)

## Beispiel: theguardian.com

### Container

![Container](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-6c947fc25d27b44871450fa1daf4a46a39089048%2Fguardian-container.png?alt=media)

### Columns

![Cols](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-d0c864489a40665174e22b391231796ce4663ef9%2Fguardian-cols.png?alt=media)

### Rows

![Rows](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-f9992461a88c4a4e254c4004c16214814743b8fc%2Fguardian-rows.png?alt=media)

### Grid

![Rows](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-39167adfe2fbbd9eeca5fc2a83718fe86cd99a2f%2Fguardian-grid.png?alt=media)
