Erstellen Sie Ihr Layout. Übernehmen Sie den Code.
Ordnen Sie Zeilen, Spalten und Elemente visuell an. Sehen Sie sich Ihr Layout in jeder Größe in der Vorschau an und exportieren Sie anschließend sauberes HTML und CSS.
CSS-Grid-Layout-Builder
Live-Vorschau
Schreibgeschützter Code. Verwenden Sie die Layout-Steuerelemente, um den Code und die Live-Vorschau zu aktualisieren.
CSS ist nur für das Layout. Der HTML-Download enthält sowohl Code als auch Beispiel-Styling.
Datenschutz zuerst — Ihr Layout bleibt in Ihrem Browser
Von der Idee zum CSS-Grid-Layout
CSS Grid ordnet Inhalte in Zeilen und Spalten an. Mit diesem visuellen CSS-Grid-Generator können Sie Kartengalerien, Seitenleisten-Layouts und Dashboards erstellen, ohne jede Grid-Regel von Hand schreiben zu müssen. Die Vorschau verwendet dasselbe Layout-CSS wie Ihr Export.
So generieren Sie Ihr Grid
Wählen Sie Karten, Seitenleiste oder Dashboard als Ihr Start-Layout.
Stellen Sie die Spalten, Zeilen und Abstände ein. Wählen Sie ein Element aus, um seine Position oder Ausdehnung zu ändern.
Testen Sie eine kleinere Vorschau-Breite, dann kopieren Sie das CSS oder laden Sie ein vollständiges HTML-Beispiel herunter.
Von Haus aus responsiv
Aktivieren Sie „Auf kleinen Bildschirmen stapeln“, um eine 640px-Media-Query zu generieren. Auf kleineren Bildschirmen werden die Elemente wieder in einer Spalte in der HTML-Reihenfolge angeordnet. Desktop- und Tablet-Vorschauen werden skaliert, um in Ihren Arbeitsbereich zu passen; die angezeigte Pixelbreite ist der tatsächliche Viewport der Vorschau.
Was der Builder unterstützt
Verwenden Sie bis zu 12 Spalten gleicher Breite, 12 Zeilen und 48 Elemente. Zeilen wachsen mit ihrem Inhalt. Elemente können sich nicht überlappen. Eine Änderung der Track-Anzahl ordnet Ihre Elemente neu an; wenn sie nicht passen, bleibt Ihr letztes gültiges Layout erhalten. Für benutzerdefinierte Track-Größen, verschachtelte Grids oder zusätzliche Breakpoints bearbeiten Sie das exportierte CSS in Phoenix Code.
Fragen zu CSS Grid
Benötigt das heruntergeladene Layout eine Bibliothek?
Nein. Der Export verwendet natives HTML und CSS Grid. Das heruntergeladene HTML ist ein vollständiges Beispiel mit eingebetteten Stilen und funktioniert ohne diesen Generator oder eine Internetverbindung.
Was ist der Unterschied zwischen CSS Grid und Flexbox?
Grid steuert Zeilen und Spalten gemeinsam, was es für Seitenlayouts und Kartensammlungen nützlich macht. Flexbox ordnet Elemente entlang einer Achse an, was es für Symbolleisten und Navigation nützlich macht. Eine Seite kann beides verwenden.
Wird mein Layout irgendwo hochgeladen?
Die Layout-Generierung und der Export werden lokal in Ihrem Browser ausgeführt. Layout-Werte, Bezeichnungen und generierter Code sind von der Analyse ausgeschlossen. Ein Neuladen setzt den Builder zurück, laden Sie also Ihr HTML herunter, um Ihre Arbeit zu speichern.
Generiertes CSS (schreibgeschützt)Generiertes HTML (schreibgeschützt)ElementGeneriertes CSS-Grid-LayoutFügen Sie Zeilen hinzu oder entfernen Sie ein Element, um Platz zu schaffen.Diese Tracks können nicht alle Ihre Elemente aufnehmen. Fügen Sie zuerst Zeilen hinzu oder entfernen Sie Elemente.Diese Position überlappt ein anderes Element oder liegt außerhalb des Rasters. Wählen Sie eine freie Position oder eine kleinere Spannweite.Geben Sie eine ganze Zahl aus dem angezeigten Bereich ein.Layout aktualisiert.Vorheriges Layout wiederhergestellt.Code kopiert.Auf die Zwischenablage konnte nicht zugegriffen werden. Markieren Sie den Code und kopieren Sie ihn manuell.HTML heruntergeladen. Öffnen Sie die Datei in Phoenix Code, um die Bearbeitung fortzusetzen.Der Download konnte nicht erstellt werden. Kopieren Sie stattdessen HTML und CSS.Gestapeltes LayoutGrid-LayoutElement ausgewählt.Verwenden Sie die Pfeiltasten, um dieses Element zu verschieben. Halten Sie die Umschalttaste gedrückt, um seine Spannweite zu ändern.Start-Layout geladen. Rückgängig stellt Ihre vorherige Arbeit wieder her.Start-Layout geladen.Dieser Builder unterstützt bis zu 48 Elemente.Standard-Layout wiederhergestellt. Rückgängig ist verfügbar.Standard-Layout wiederhergestellt.