CSS-Grid-Layout-Generator
Spalten, Zeilen und Abstände einstellen und den passenden CSS-Grid-Code sofort erhalten
Ein CSS-Grid-Werkzeug für Webdesigner und Frontend-Entwickler: Stellen Sie über Schieberegler und Auswahlfelder die Anzahl der Spalten und Zeilen, die Größe der einzelnen Tracks (1fr, feste px-Werte, auto, minmax usw.) sowie den Abstand (gap) ein – die Vorschau aktualisiert sich dabei in Echtzeit. Den fertigen CSS- und HTML-Code kopieren Sie anschließend mit einem Klick direkt in Ihr Projekt. Alle Berechnungen finden ausschließlich im Browser statt, es werden keine Daten an einen Server gesendet.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Legen Sie mit den Schiebereglern die Anzahl der Spalten (Columns) und Zeilen (Rows) auf jeweils 1 bis 6 fest.
- Bestimmen Sie mit dem Schieberegler „Abstand“ (Gap) den Zwischenraum der Grid-Elemente im Bereich von 0 bis 40 px.
- Wählen Sie unter Spaltengröße und Zeilengröße für jeden Track die gewünschte Einheit: 1fr, 2fr, feste px-Werte, auto oder minmax.
- Prüfen Sie das Ergebnis in der Vorschau und kopieren Sie den fertigen CSS-/HTML-Code über die Schaltfläche „Code kopieren“ am unteren Rand.
FAQ
- Kann ich den erzeugten Code unverändert in einem echten Projekt einsetzen?
- Ja. Es handelt sich um standardkonformen CSS-Grid-Code auf Basis der Klassen grid-container und grid-item. Sie fügen ihn einfach ein und passen bei Bedarf nur die Klassennamen oder die Anzahl der Elemente an.
- Lassen sich auch mehr als sechs Spalten oder Zeilen anlegen?
- Die Schieberegler unterstützen derzeit maximal sechs Tracks. Benötigen Sie mehr, erweitern Sie im kopierten CSS einfach die Werte von grid-template-columns bzw. grid-template-rows von Hand.
- Was bewirkt minmax(100px, 1fr) bei grid-template-columns?
- Die Spalte behält eine Mindestbreite von 100 px, wächst aber im Verhältnis 1fr flexibel mit, sobald Platz frei ist. So verhindern Sie in responsiven Layouts, dass Inhalte zu schmal gequetscht werden.