Was ist CSS Grid?
CSS Grid Layout ist ein zweidimensionales Layoutsystem, das in modernen Browsern integriert ist. Sie definieren einen Grid-Container mit display: grid und steuern dann Spalten mit grid-template-columns und Zeilen mit grid-template-rows. Brucheinheiten (fr) verteilen den verfügbaren Platz proportional. Untergeordnete Elemente können mit grid-column: span N und grid-row: span N mehrere Spalten oder Zeilen überspannen.
So verwenden Sie den CSS Grid Generator
-
Legen Sie die Anzahl der Spalten und Zeilen über die Zahleneingaben fest (jeweils 1–12).
-
Passen Sie grid-template-columns und grid-template-rows zur Größensteuerung an (z. B. 1fr 2fr, 200px auto).
-
Stellen Sie den Abstand zwischen Zellen ein (z. B. 10px, 1rem).
-
Klicken Sie auf eine beliebige Zelle in der Vorschau, um sie auszuwählen (wird orange).
-
Legen Sie col-span und row-span im Panel Zellenspan fest, und klicken Sie auf Anwenden. Zellen mit Span werden grün.
-
Klicken Sie auf den CSS- oder HTML-Reiter, um das Ausgabeformat zu wechseln, und kopieren Sie in die Zwischenablage.
-
Klicken Sie auf Alles zurücksetzen, um mit einem neuen 3×3-Raster von vorne zu beginnen.