CSS-Grid-Layout-Generator
CSS-Grid visuell gestalten und Code sofort kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Ein visueller CSS-Grid-Builder für Webentwickler und Designer. Passen Sie die Anzahl der Spalten und Zeilen an, wählen Sie eine Größe für jede Spur (1fr, feste Pixel, auto, minmax und mehr) und stellen Sie den Abstand ein — die Vorschau aktualisiert sich live, und der fertige CSS- und HTML-Code lässt sich direkt kopieren. Alles läuft lokal im Browser, es werden keine Daten an einen Server gesendet.
Anleitung
- Stellen Sie die Anzahl der Spalten und Zeilen jeweils zwischen 1 und 6 über die Schieberegler ein.
- Nutzen Sie den Gap-Regler, um den Abstand zwischen den Grid-Elementen zwischen 0 und 40px festzulegen.
- Wählen Sie unter Spaltengrößen und Zeilengrößen für jede Spur eine Einheit wie 1fr, 2fr, feste Pixel, auto oder minmax.
- Prüfen Sie die Live-Vorschau und klicken Sie auf 'Code kopieren', um den fertigen CSS- und HTML-Code zu übernehmen.
FAQ
- Kann ich den generierten Code direkt in meinem Projekt verwenden?
- Ja, es handelt sich um Standard-CSS-Grid basierend auf den Klassen grid-container und grid-item — einfach einfügen und Klassennamen oder Anzahl der Elemente bei Bedarf anpassen.
- Kann ich mehr als 6 Spalten oder Zeilen erstellen?
- Die Schieberegler sind aktuell auf 6 begrenzt. Für mehr Spuren können Sie den kopierten CSS-Code manuell erweitern, indem Sie grid-template-columns/rows anpassen.
- Was bewirkt minmax(100px, 1fr)?
- Es garantiert eine Mindestbreite von 100px für diese Spur, erlaubt aber gleichzeitig flexibles Wachstum im Verhältnis 1fr, sodass Inhalte in responsiven Layouts nicht zu eng werden.