CSS-Grid-Generator
Kostenloser Online-CSS-Grid-Layout-Generator, visueller Editor
CSS-Grid-Layout-Grundlagen
CSS Grid ist ein zweidimensionales Layoutsystem zum Anordnen von Elementen in Zeilen und Spalten. Wichtige Eigenschaften: grid-template-columns definiert Spaltentracks, grid-template-rows definiert Zeilentracks, gap steuert Abstaende und grid-area positioniert Elemente. Grid eignet sich hervorragend fuer seitenweite Layouts.
Den Grid-Generator verwenden
Legen Sie die Anzahl der Spalten und Zeilen fest. Die Vorschau zeigt das Grid-Layout. Passen Sie Groessen und Abstaende an. Kopieren Sie den generierten CSS-Code fuer Ihr Projekt.
▶Wann sollte ich Grid statt Flexbox verwenden?
Verwenden Sie Grid fuer zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig). Verwenden Sie Flexbox fuer eindimensionale Layouts (entweder eine Zeile ODER eine Spalte). Grid ist besser fuer Seitenlayouts; Flexbox besser fuer Komponentenlayouts.
▶Was ist die fr-Einheit in CSS Grid?
fr (Bruchteil) ist eine flexible Einheit, die den verbleibenden Platz verteilt. grid-template-columns: 1fr 2fr gibt der zweiten Spalte doppelt so viel Platz wie der ersten. Es ist aehnlich wie flex-grow in Flexbox.
▶Koennen Grid-Elemente mehrere Zellen umfassen?
Ja. Verwenden Sie grid-column: span 2 oder grid-row: span 2, um ein Element ueber mehrere Spalten oder Zeilen zu erstrecken. Sie koennen auch benannte Grid-Areas fuer komplexe Layouts verwenden.