CSS-Grid-Generator

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.

Dein Layout bleibt in deinem 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

  1. Wählen Sie Karten, Seitenleiste oder Dashboard als Ihr Start-Layout.
  2. Stellen Sie die Spalten, Zeilen und Abstände ein. Wählen Sie ein Element aus, um seine Position oder Ausdehnung zu ändern.
  3. 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.

Weiterbauen: HTML-ViewerHTML-FormatiererFarbwähler