ZenovayTools

CSS Grid Generator

Erstellen Sie CSS Grid-Layouts mit einem visuellen Editor. Definieren Sie Spalten, Zeilen, Lücken und verteilen Sie Zellen über Bereiche.

Preview (click cells to span)
12px
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
}

So verwenden Sie CSS Grid Generator

  1. 1Legen Sie die Anzahl der Spalten und Zeilen für Ihr Grid-Layout fest.
  2. 2Passen Sie Spaltenbreiten und Zeilenhöhen mit den Steuerelementen an.
  3. 3Klicken und ziehen Sie, um Zellen über mehrere Spalten oder Zeilen zu verteilen.
  4. 4Legen Sie die Lücke zwischen Grid-Zellen fest.
  5. 5Kopieren Sie den generierten CSS Grid-Code.
ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.

Häufig gestellte Fragen

Was ist CSS Grid?▾
CSS Grid Layout ist ein zweidimensionales Layoutsystem für das Web. Es ermöglicht die Anordnung von Elementen in Reihen und Spalten und vereinfacht das Design komplexer Layouts ohne Floats oder Positionierung.
Wie funktionieren grid-template-columns und grid-template-rows?▾
grid-template-columns definiert die Anzahl und Breite der Spalten, während grid-template-rows die Anzahl und Höhe der Reihen definiert. Verwenden Sie fr-Einheiten für flexible Proportionen, px für feste Größen oder auto für inhaltsbasierte Dimensionierung.
Was ist die fr-Einheit?▾
Die fr-Einheit (Fraktion) repräsentiert einen Bruchteil des verfügbaren Platzes im Grid-Container. Zum Beispiel erstellt 1fr 2fr zwei Spalten, wobei die zweite doppelt so breit ist wie die erste.
Wie kann ich Elemente über mehrere Zellen ausdehnen?▾
Klicken Sie auf eine Grid-Zelle, um einen Span zu beginnen, und klicken Sie dann auf eine benachbarte Zelle, um ihn zu erweitern. Das Tool generiert grid-column- und grid-row-Span-Regeln für das ausgewählte Element.
Kann ich dieses Tool auf meinem Smartphone verwenden?▾
Ja, der CSS-Grid-Generator funktioniert in jedem modernen mobilen Browser. Konfigurieren Sie Ihr Grid-Layout visuell und kopieren Sie das CSS auf jedem Gerät.
Enthält das generierte CSS HTML-Markup?▾
Ja. Das Tool generiert sowohl die CSS-Grid-Stile als auch eine passende HTML-Struktur, sodass Sie ein vollständiges funktionierendes Grid-Layout direkt in Ihr Projekt kopieren können.
Kann ich den Abstand zwischen Grid-Zellen anpassen?▾
Ja. Passen Sie die Zeilen- und Spaltenabstandswerte an, um den Abstand zwischen Grid-Elementen zu steuern. Das Tool verwendet die Standard-CSS-gap-Eigenschaft, die in allen modernen Browsern unterstützt wird.