CSS-Layout-Generator

Sieh dir ein Flexbox- oder Grid-Layout in der Vorschau an.

Auf deinem Gerät · Ohne Konto

CSS-Layout-Generator verarbeitet deine Eingaben in diesem Browser. Eingaben und Ergebnisse werden nicht in Analysedaten erfasst. Zuletzt verwendete Tools speichern Tool-Namen, Besuchszahlen und den Zeitpunkt des letzten Besuchs. Gespeicherte Tools speichern nur ihre Namen. Das Speichern von Entwürfen ist optional und erfolgt auf diesem Gerät; gespeicherten Text kannst du über die Entwurfsfunktionen löschen. Das optionale Laden von Text über eine URL stellt eine Verbindung zum jeweiligen Server her; der Server sieht die URL und deine IP-Adresse. Die optionale Aktion „Verwenden in“ speichert Daten zur Übergabe in diesem Tab. Das nächste Tool entfernt sie beim Öffnen und ignoriert sie, wenn mehr als eine Minute vergangen ist.

„Link kopieren“ nimmt die von dir zum Teilen ausgewählten Eingaben in die Adresse auf. Alle mit diesem Link können sie erneut öffnen. Dateien und erzeugte Ergebnisse sind nicht enthalten. Passwort- und Schlüssel-Tools teilen nur Einstellungen.

Deutsch

Elementbeschriftungen, eine pro Zeile

Layout

Optionen und lokale Datei

Grid-Spalten

Abstand (px)

Flex-Basis (px)

Textdatei auf diesem Gerät öffnen

Optionale Einstellungen gelten nur für diesen Tab.

Dein Ergebnis

HTML-Quelltext

Mehr

Tastenkürzel

Über Links und Zurücksetzen

Links enthalten deine Eingaben und Einstellungen. Wer den Link hat, kann sie sehen. Lass private Texte deshalb weg. Dateien und erzeugte Ergebnisse sind nicht enthalten; Zufallsauswahlen werden erneut ausgeführt.

Beim Zurücksetzen wird das Tool mit den Ausgangswerten neu geladen. Offene Dateien und Gerätesteuerungen werden freigegeben. Gespeicherte Entwürfe bleiben auf diesem Gerät, bis du sie löschst.

So funktioniert der CSS-Layout-Generator

Erzeuge aus Elementbeschriftungen ein responsives Grid-Layout oder ein Flexbox-Layout mit Umbruch. Ändere die Anzahl der Grid-Spalten, den Abstand oder die Flex-Basis. Kopiere oder lade anschließend dasselbe eigenständige HTML-Dokument herunter, das die Vorschau verwendet.

Als Nächstes: CSS formatieren

Als Nächstes: CSS-Spezifität berechnen

Als Nächstes: Kontrast prüfen

Beispiel

Ein dreispaltiges Grid verwendet repeat(3, minmax(0, 1fr)), damit lange Beschriftungen innerhalb gleich breiter Spalten umbrechen können. Bei Flexbox richtet sich der Umbruch stattdessen nach der bevorzugten Basisgröße der Elemente und dem verfügbaren Platz.

Hinweise zum Ergebnis

Eine Grundlage für dein Layout, kein vollständiger Website-Baukasten oder Browserkompatibilitätstest. Die Vorschau verwendet feste Beispielstile. Grid behält die gewählte Spaltenanzahl auch bei schmalen Breiten bei. Ergänze Media Queries, wenn dein endgültiges Design unterschiedliche Spaltenzahlen benötigt.

Aktualisiert 7. Oktober 2026

Diese Seite zitieren

Zitierstil

ToolOctopus. “CSS-Layout-Generator.” Aktualisiert 7. Oktober 2026. https://tooloctopus.com/de/css-layout-generator.

Ergänze ein Abrufdatum, wenn deine Vorgaben das verlangen.

Die Quellenangaben werden mit citeproc-js von Frank Bennett und Zitierstilen der Citation Style Language formatiert. Lizenz und Quellcode.