CSS-Werkzeuge/CSS Grid Generator
CSS Grid Generator
Entwerfen Sie komplexe CSS Grid Layouts mit interaktiven visuellen Kontrollen
CSS Grid Anleitung
Erfahren Sie, wie Sie komplexe zweidimensionale Layouts erstellen
Was ist CSS Grid?
CSS Grid ist ein zweidimensionales Layout-System, das sowohl Spalten als auch Zeilen verarbeitet. Es bietet präzise Kontrolle über die Platzierung und Größe von Elementen und eignet sich ideal für komplexe Seitenlayouts, Dashboards und Bildergalerien.
So verwenden Sie dieses Tool
- Definieren Sie Grid-Spalten und -Zeilen mit den Vorlageneinstellungen
- Fügen Sie Grid-Elemente hinzu und positionieren Sie sie mit grid-column/row
- Passen Sie Abstände, Ausrichtung und Inhaltsverteilung an
- Probieren Sie vorgefertigte Layouts oder erstellen Sie Ihr eigenes Design
Profi-Tipps
- Verwenden Sie fr-Einheiten für flexible Track-Größen, die sich dem verfügbaren Platz anpassen
- Die minmax()-Funktion erstellt responsive Spalten ohne Media Queries
- Benannte Grid-Linien und -Bereiche machen komplexe Layouts lesbarer
Browser-Unterstützung
CSS Grid wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Es hat eine hervorragende Unterstützung für den Produktionseinsatz mit über 95% globaler Abdeckung.
Häufig gestellte Fragen
Was ist die fr-Einheit und wie wird sie verwendet?
fr (fraction) ist eine flexible Einheit, die den verfügbaren Platz des Grid-Containers aufteilt. '1fr 2fr' teilt den Platz im Verhältnis 1:2 auf. Im Gegensatz zu px oder % berechnet und verteilt es den Platz automatisch, was es für responsive Layouts sehr nützlich macht.
Wie verwendet man grid-template-areas?
Mit grid-template-areas können Sie Layouts visuell definieren. Benennen Sie jeden Grid-Bereich und stellen Sie die Platzierung als Zeichenketten dar. Beispiel: 'header header' 'sidebar main' 'footer footer'. Es ermöglicht intuitive und wartungsfreundliche Layouts.
Wann verwendet man die repeat()-Funktion?
repeat() definiert sich wiederholende Tracks prägnant. 'repeat(3, 1fr)' entspricht '1fr 1fr 1fr'. In Kombination mit auto-fill oder auto-fit können Sie responsive Grids erstellen, bei denen die Spaltenanzahl automatisch an die Container-Größe angepasst wird.
Wie lasse ich Grid-Elemente mehrere Zellen überspannen?
Verwenden Sie das span-Schlüsselwort in den Eigenschaften grid-column und grid-row. 'grid-column: span 2' nimmt 2 Spalten ein, 'grid-row: 1 / 3' nimmt von Zeile 1 bis 3 (2 Zeilen) ein. Dies ermöglicht einfach unregelmäßige Layouts.
Was ist der Unterschied zwischen auto-fill und auto-fit?
Beide werden mit repeat() verwendet, um automatisch Spalten zu erstellen. auto-fill behält leere Tracks bei, um den Platz zu füllen, auto-fit kollabiert leere Tracks, damit der Inhalt wächst. Bei wenigen Elementen streckt auto-fit die Elemente, um den Platz zu füllen.