Konzept
Last updated
Was this helpful?
Last updated
Was this helpful?
Das CSS Grid Layout Modul von CSS dient dazu, das Definieren von gridbasierten Layouts zu vereinfachen.
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.
Das Grid ist ein Raster, an dem sich alle Elemente in einem Layout ausrichten.
Grundlage für jedes Grid ist der Container.
Der Container fixiert die Breite des Layouts. Die Höhe kann ebenfalls fixiert werden, wird aber üblicherweise flexibel gelassen.
Im Container werden beliebig viele Spalten (Columns) und Zeilen (Rows) definiert. Alle Inhaltselemente richten sich an diesem Raster aus.
Zwischenräume zwischen Columns und Rows bezeichnet man als Gaps.
