CSS-Grid-Generator
Definieren Sie Spalten und Zeilen, ziehen Sie Elemente über die Zellen und kopieren Sie das Grid-CSS samt passendem HTML mit einem Klick.
Ihr Grid wird direkt in Ihrem Browser erstellt. Keine Ihrer Einstellungen wird an BroBroGo übertragen.
FAQ
Wie platziere ich Elemente auf dem Grid?
Klicken und ziehen Sie über die Zellen, um ein Rechteck aufzuziehen. Sobald Sie loslassen, wird es zu einem platzierten Kind-Element, das sich über diese Spalten und Zeilen erstreckt. Jedes gezeichnete Element erhält eine eigene grid-column- und grid-row-Regel im CSS sowie ein passendes div im HTML. Elemente können sich überlappen, wobei das später gezeichnete oben liegt. Nutzen Sie das × am Element, um es zu entfernen.
Können Spalten und Zeilen unterschiedliche Größen haben?
Ja. Jeder Track hat ein eigenes Größenfeld, in das Sie beliebige CSS-Grid-Werte eintragen können – z. B. 1fr, 200px, auto, min-content oder minmax(120px, 1fr). Tracks mit identischer Größe werden automatisch in repeat() zusammengefasst, um den Code kurz zu halten. Spalten- und Zeilenabstände werden separat definiert und zu einem einzigen gap-Wert zusammengefasst, wenn sie übereinstimmen.
Was mache ich mit dem generierten Code?
Kopieren Sie das CSS und das HTML nebeneinander. Das HTML liefert den Container mit einem div pro Element, und das CSS definiert das Grid und positioniert jedes Element. Fügen Sie beides in Ihr Projekt ein, um exakt das Layout zu erhalten, das Sie hier gezeichnet haben.