CSS Grid Generator
Erstellen Sie CSS Grid Layouts interaktiv.
Klicken Sie auf „Zelle zum Erweitern“.
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Visueller CSS-Grid-Layout-Generator
CSS Grid Layout ist das leistungsstärkste zweidimensionale Layout-System in CSS. Im Gegensatz zu Flexbox, das auf einer einzelnen Achse (Zeile oder Spalte) arbeitet, ermöglicht CSS Grid die gleichzeitige Steuerung von Zeilen und Spalten, was es ideal für vollständige Seitenlayouts, Bildergalerien, Dashboards und jedes Design macht, das eine präzise und vorhersagbare Rasterstruktur erfordert.
Unser visueller Generator ermöglicht die Definition der Spalten- und Zeilenanzahl, die Anpassung der Größenvorlagen (grid-template-columns und grid-template-rows) mit Einheiten wie fr, px, % oder auto, die Einstellung der Zellenabstände (column-gap und row-gap) und die Erweiterung einzelner Zellen über mehrere Spalten oder Zeilen mittels grid-column: span und grid-row: span.
Die Vorschau wird in Echtzeit aktualisiert und zeigt genau, wie Ihr Grid aussehen wird. Klicken Sie auf eine beliebige Zelle, um sie auszuwählen, und verwenden Sie die Erweiterungssteuerungen, um sie über mehr als eine Spalte oder Zeile zu erstrecken. Der generierte CSS-Code enthält alle erforderlichen Eigenschaften, um das exakte Layout zu replizieren, das Sie in der Vorschau sehen, bereit zum Kopieren und Verwenden in Ihrem Projekt.
Häufig gestellte Fragen
Was bedeutet die Einheit 'fr'?
Die Einheit 'fr' (Fraktion) repräsentiert einen Anteil des verfügbaren Platzes im Grid-Container. Zum Beispiel erstellt '1fr 2fr' zwei Spalten, wobei die zweite doppelt so breit ist wie die erste. Es ist ähnlich wie flex-grow, aber intuitiver für die Definition von Proportionen.
Ersetzt CSS Grid Flexbox?
Nein, sie ergänzen sich. Grid eignet sich besser für zweidimensionale Layouts (Zeilen und Spalten), während Flexbox bei eindimensionalen Layouts (eine Zeile oder Spalte) herausragt. Es ist üblich, Grid für die allgemeine Seitenstruktur und Flexbox für die Ausrichtung von Inhalten innerhalb jedes Abschnitts zu verwenden.
Wie lasse ich eine Zelle mehrere Spalten einnehmen?
In unserem Tool klicken Sie auf die Zelle und verwenden die '+'-Schaltflächen, um sie zu erweitern. In CSS wird dies mit 'grid-column: span 2' (für 2 Spalten) oder 'grid-row: span 2' (für 2 Zeilen) erreicht. Sie können auch exakte Positionen mit 'grid-column: 1 / 3' angeben.
Mehr erfahren? Lesen Sie unseren vollständigen Leitfaden →