CSS Grid Generator
Verwandeln Sie eine Text-Layout-Skizze in ein echtes CSS Grid mit benannten Bereichen.
CSS Grid Generator
Fügen Sie eine grobe Skizze eines Seitenlayouts ein und dieses Tool verwandelt es in funktionierenden CSS Grid Code. Schreiben Sie jede Zeile des Layouts auf eine eigene Zeile, und wiederholen Sie dasselbe Wort über mehrere Zellen, um einen benannten Bereich zu markieren — "header header" auf einer Zeile, "nav main" auf der nächsten, "footer footer" auf der letzten beschreibt ein klassisches dreizeiliges Layout mit vollbreitiger Kopf- und Fußzeile. Das Tool liest die wiederholten Namen als Grid-Bereiche und generiert die passende grid-template-areas Deklaration automatisch.
Die Optionen steuern den Rest des generierten CSS. Stellen Sie den Abstand zwischen Zellen in Pixeln ein, und geben Sie optional explizite Spaltenbreiten oder Zeilenhöhen mit beliebigen gültigen CSS-Spurgrößen an — fr-Einheiten, auto oder minmax(); lassen Sie beide Felder leer und das Tool verteilt die Spuren gleichmäßig. Aktivieren Sie Pro-Bereich-Regeln, um eine vorgefertigte grid-area Deklaration für jeden benannten Bereich zu erhalten, wobei Sie ein Klassenpräfix verwenden, das Sie wählen, sodass "header" direkt zu .grid-header wird. Ein Responsive-Umschalter fügt eine max-width Media Query hinzu, die das gesamte Layout auf eine Spalte für schmale Bildschirme reduziert, und ein HTML-Umschalter hängt ein passendes Markup-Gerüst an, damit Sie die Struktur neben dem CSS sehen können.
Wenn zwei Zellen mit demselben Namen kein solides Rechteck bilden — eine L-Form oder ein Name, der eine Zelle überspringt — kann echtes CSS Grid diesen Bereich nicht korrekt rendern, daher kennzeichnet das Tool dies direkt in der Ausgabe als Warnkommentar statt stille ungültig aussehende Regeln zu generieren. Zeilenumbrüche von jedem Betriebssystem werden gleich behandelt, und die Live-Zählung unter der Ausgabe verfolgt, wie viele Layout-Zeilen, benannte Bereiche und Zeichen das generierte CSS enthält.
Alles läuft lokal in Ihrem Browser; das Layout, das Sie skizzieren, und das CSS, das Sie zurückbekommen, werden nie irgendwohin gesendet. Kopieren Sie das Ergebnis, laden Sie es als .txt Datei herunter, oder senden Sie die Ausgabe direkt in ein anderes Tool wie den CSS-Formatierer, um die Einrückung weiter zu verfeinern.