CSS-Gradient-Generator
Erstellen Sie lineare und radiale CSS-Verläufe visuell und kopieren Sie den Code.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Presets
Was ist CSS Grid?
CSS Grid ist ein zweidimensionales Layout-System fuer das Web, das es ermoeglicht, Inhalte in Zeilen und Spalten gleichzeitig anzuordnen. Es ist das leistungsfaehigste CSS-Layout-Tool fuer komplexe Seitenlayouts.
Vor CSS Grid waren komplexe Layouts nur mit Floats, Tabellen oder Flexbox-Tricks moeglich. Grid loest das Layoutproblem direkt, indem es sowohl horizontale als auch vertikale Ausrichtung nativ unterstuetzt.
Grundlegende Grid-Syntax
Erstellen Sie ein Grid mit display: grid auf dem Container. Definieren Sie Spalten mit grid-template-columns und Zeilen mit grid-template-rows. Die fr-Einheit verteilt verfuegbaren Platz proportional.
Beispiel: grid-template-columns: 1fr 2fr 1fr erstellt drei Spalten, wobei die mittlere doppelt so breit ist. Die repeat()-Funktion vereinfacht wiederholte Muster: repeat(3, 1fr) ergibt drei gleiche Spalten.
So verwenden Sie dieses Tool
Definieren Sie Zeilen und Spalten visuell, platzieren Sie Elemente per Drag-and-Drop und kopieren Sie den generierten CSS-Code. Das Tool zeigt eine Live-Vorschau des Grids mit farbcodierten Bereichen.
CSS-Grid-Tipps
Verwenden Sie minmax() fuer responsive Spalten: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) erstellt automatisch so viele Spalten wie passen, mindestens 250px breit.
Benannte Grid-Bereiche (grid-template-areas) machen das Layout lesbarer. Definieren Sie 'header header' 'sidebar main' 'footer footer' und weisen Sie Elementen ihre Bereiche zu.
Leistungsaspekte
CSS Grid ist hochperformant — der Browser berechnet das Layout in einem einzigen Durchlauf. Fuer einfache eindimensionale Layouts (nur Zeile oder nur Spalte) ist Flexbox die bessere und einfachere Wahl.
Haeufig gestellte Fragen
Wann verwende ich Grid statt Flexbox?
Verwenden Sie Grid fuer zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig) und Flexbox fuer eindimensionale Layouts (nur eine Richtung). Viele Seiten verwenden beides — Grid fuer das Gesamtlayout, Flexbox fuer Komponenten darin.
Wird CSS Grid von allen Browsern unterstuetzt?
Ja, CSS Grid wird seit 2017 von allen modernen Browsern unterstuetzt (Chrome, Firefox, Safari, Edge). Die globale Browserunterstuetzung liegt bei ueber 97 %. Nur der IE 11 hat eingeschraenkte Unterstuetzung.