Drücke Ctrl+D, um diese Seite als Lesezeichen zu speichern
Der CSS-Grid-Generator ist ein kostenloses Online-Tool zur visuellen Gestaltung von Grid-Layouts.
Wie benutzt man CSS-Grid-Generator?
Legen Sie die Anzahl der Zeilen und Spalten fest.
Ziehen Sie Zellen, um Bereiche zusammenzuführen oder die Platzierung anzupassen.
Kopieren Sie den generierten CSS-Grid-Code für Ihr Projekt.
Häufig gestellte Fragen zu CSS-Grid-Generator
Was ist der Unterschied zwischen CSS Grid und Flexbox?
CSS Grid ist für 2D-Layouts (Zeilen + Spalten), Flexbox für 1D-Layouts (Zeile oder Spalte). Grid eignet sich besser für komplexe Seitenlayouts.
Was ist die Einheit fr?
fr (fraction) ist eine proportionale Einheit in CSS Grid. Zum Beispiel teilt 1fr 2fr den Raum im Verhältnis 1:2 auf. Sehr nützlich für responsive Layouts.
Lässt sich ein responsives Raster ohne Media Queries bauen?
Ja. Mit repeat(auto-fit, minmax(240px, 1fr)) legen Sie nur die Mindestbreite einer Spalte fest und überlassen den Rest dem Browser: Spalten kommen hinzu, wenn das Fenster wächst, und fallen weg, wenn es schrumpft – vom Handy bis zum Desktop ohne einen einzigen Breakpoint. Beachten Sie: auto-fill lässt im Restplatz leere Spuren stehen, auto-fit dehnt die vorhandenen aus, um ihn zu füllen; bei wenigen Elementen unterscheiden sich beide deutlich.
Ein langes Wort dehnt eine Rasterspalte und sprengt das Layout.
Grid-Elemente haben standardmäßig die Mindestgröße auto und weigern sich daher, unter ihren Inhalt zu schrumpfen – eine lange URL oder ein untrennbares Wort drückt die ganze Spalte auf. min-width: 0 auf diesem Element erlaubt dem Raster, es wieder zu verkleinern, und overflow-wrap: anywhere lässt die lange Zeichenkette umbrechen. Die Spur statt mit 1fr als minmax(0, 1fr) zu definieren beseitigt die Ursache gleich ganz – deshalb ist das so verbreitet.
Wie nutzt man CSS-Grid-Generator optimal?
repeat(auto-fit, minmax(240px, 1fr)) bricht von selbst um – ganz ohne Media Queries.
Abstände über gap statt margin setzen, dann bleibt in der letzten Spalte kein Rest übrig.
Bei komplexen Layouts die Bereiche mit grid-template-areas benennen – das bleibt lesbar.