CSS Grid Generator (Visuell)

CSS Grid ist ein zweidimensionales Layoutsystem, das sowohl Spalten als auch Zeilen gleichzeitig verarbeitet. Flexbox ist eindimensional und arbeitet entlang einer Spalten- oder Zeilenachse. Grid eignet sich ideal für seitenweite Layouts (Header, Sidebars, Inhaltsbereiche), während Flexbox sich für die Ausrichtung auf Komponentenebene (Navigations Elemente, Karteninhalte) eignet. Die meisten modernen Layouts verwenden beides zusammen.

Die fr-Einheit (fraction) repräsentiert einen Bruchteil des verfügbaren Platzes im Grid-Container. 1fr 2fr bedeutet, dass die zweite Spalte doppelt so viel Platz wie die erste erhält. Sie ähnelt flex-grow in Flexbox, ist aber speziell für Grid-Tracks konzipiert. fr-Einheiten verteilen den verbleibenden Platz automatisch, nachdem feste Größen (px, em) zugewiesen wurden.

grid-template-areas ermöglicht es Ihnen, Ihr Layout mithilfe von benannten Zeichenketten zu definieren, die die Grid-Struktur in Ihrem CSS visuell darstellen. Anstatt Elemente anhand von Zeilennummern zu platzieren (grid-column: 1 / 3), weisen Sie sie anhand ihres Namens zu (grid-area: header). Der resultierende CSS-Code liest sich wie eine ASCII-Art-Version Ihres Layouts, wodurch es selbstdokumentierend und einfacher zu warten ist.

Das Holy Grail-Layout ist eine klassische Webseitenstruktur mit einem Header, der sich über die gesamte Breite erstreckt, einem dreispaltigen Body (linke Sidebar, Hauptinhalt, rechte Sidebar) und einem Full-Width-Footer. Es war historisch schwierig, dies mit CSS-Floats zu erreichen, und wurde Holy Grail genannt, weil eine saubere Implementierung so schwer zu erreichen war. CSS Grid macht es trivial.