01
Das Modell auswählen
Grid eignet sich für benannte Zeilen und Spalten, Flexbox für eine Reihe oder Spalte von Elementen. Beide Modi speichern ihre Werte separat.
- Das Grid-Beispiel beginnt mit vier rechteckigen Bereichen.
CSS-Layout-Werkzeuge
CSS-Layout-Generator— Layout und Code gemeinsam prüfen
Zwischen Grid und Flexbox wechseln und Vorschau, HTML und CSS zusammen prüfen.
CSS-Layout-Generator
Startzelle und gegenüberliegende Ecke wählen.
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
@media (max-width: 640px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}Layouteinstellungen bleiben in diesem Browser-Tab; kein Upload und kein Verlauf.
Code und Vorschau sind aktuell.
Für eine Seite mit Kopfzeile, Seitenleiste und Inhalt ist ein CSS-Layout-Generator hilfreicher als das Zählen von Wörtern in grid-template-areas. Die vorgegebene 3×3-Fläche zeigt jede benannte Region unmittelbar.
Eine Navigation braucht dagegen oft nur eine Flex-Zeile. Der CSS-Layout-Generator behält beide Einstellungen getrennt, damit Sie ohne erneutes Ausfüllen zwischen Seitenraster und Elementreihe wechseln.
Warum dieser CSS-Layout-Generator
Die sichtbare Geometrie und der exportierte Code kommen aus demselben Modell.
Grid und Flexbox in einem Arbeitsbereich
Der CSS-Grid-Generator zeichnet zweidimensionale Bereiche; der Flexbox-Generator richtet Elemente entlang einer Achse aus. Beim Wechsel bleiben Track-Größen, Abstand und Ausrichtung für beide Modi erhalten.
Mobile Vorschau mit echtem Media Query
Das responsive Layout verwendet bei höchstens 640px eine erzeugte @media-Regel. Die schmale Vorschau zeigt denselben HTML/CSS-Code und ist kein bloß verkleinertes Bild.
Vorschau und Ausgabe aufeinander abstimmen
02
Tracks und Bereiche anpassen
Für jede Zeile und Spalte sind fr, px, auto oder minmax() möglich. Einen Bereich wählen und zwei gegenüberliegende Ecken anklicken.
- Ohne Automatik startet Strg/Cmd+Enter die Generierung.
03
Mobile Ausgabe kontrollieren
Bei 390px sehen Sie die Stapelung. Solange Einstellungen geändert und Code noch nicht neu erzeugt wurden, bleiben Kopieren und Download gesperrt.
- Nur das Mobile-Preset ergänzt die @media-Regel.
Vom Raster zum verwendbaren Markup
Benannte Grid-Bereiche
Grid-Template-Areas werden gezeichnet und mit passenden grid-area-Regeln für jedes HTML-Kindelement ausgegeben.
Flex-Einstellungen am Container
Richtung, Umbruch, beide Ausrichtungsachsen, Elementzahl und Abstand sind veränderbar. Der Browser selbst rendert die Vorschau.
Responsive CSS und HTML
Das 640px-Preset liefert eine echte Medienabfrage samt zugehörigem HTML, getrennt kopierbar oder als Datei speicherbar.
Grenzen der erzeugten Layoutregeln
- Bereiche müssen Rechtecke sein
- Überlappende, getrennte oder L-förmige Namen würden grid-template-areas ungültig machen. Die Fläche lehnt solche Änderungen ab und sperrt den Export des alten Ergebnisses.
- Track-Werte werden geprüft
- 1fr, 200px, auto und minmax(120px, 1fr) sind gültige Beispiele. Nicht unterstützter Text wird nicht in ein Stylesheet übernommen.
- Ein mobiler Breakpoint
- Bei höchstens 640px wird gestapelt. Tablet und Desktop ändern nur die Vorschaubreite; eigene Breakpoint-Regeln, Tailwind, SCSS und React werden nicht erzeugt.
- HTML bleibt ein Grundgerüst
- Der Code enthält benannte Grid-Kinder oder nummerierte Flex-Elemente. Bestehende Seiten, Dateien und beliebige Inhalte werden nicht eingelesen.
Fragen zum CSS-Layout-Generator
Wann sollte ich Grid statt Flexbox verwenden?
Grid steuert Zeilen und Spalten einer Seitenstruktur; Flexbox verteilt Elemente entlang einer Achse. Im CSS-Layout-Generator können Sie beide Modelle vergleichen.
Wie erstelle ich ein responsives CSS-Grid?
Für ein responsives CSS-Grid aktivieren Sie das Mobile-Preset und prüfen die 390px-Ansicht. Der Export ergänzt eine 640px-Medienabfrage mit einer einzelnen Spalte.
Was bedeuten fr und px bei Grid-Spalten?
fr teilt verbleibenden Platz auf, px hält eine feste Größe. auto orientiert sich am Inhalt; die Track-Eingaben werden vor dem Export geprüft.
Wie werden benannte Bereiche im Grid definiert?
Gleiche Namen über benachbarte Zellen bilden einen Bereich. Seine Form muss rechteckig bleiben, und das HTML-Kind erhält die passende grid-area-Regel.
Kann ich CSS und HTML aus dem Generator kopieren?
Ja. CSS und HTML können getrennt kopiert werden; die heruntergeladene HTML-Datei enthält beide Teile. Bei veralteten Ergebnissen sind die Aktionen gesperrt.
Fehlt ein Layoutfall?
Mit dem CSS-Layout-Generator starten
Beginnen Sie mit dem Beispiel, prüfen Sie die echte Browserdarstellung und übernehmen Sie passendes HTML und CSS in Ihr Projekt.