Was ist CSS Grid?
CSS Grid Layout ist ein zweidimensionales Layout-System, mit dem Sie komplexe, gitterbasierte Designs mit Zeilen und Spalten erstellen können. Im Gegensatz zu Flexbox, das jeweils eine Dimension bearbeitet, gibt Ihnen Grid volle Kontrolle über die horizontale und vertikale Platzierung von Elementen.
So verwenden Sie diesen Generator
- Legen Sie die Anzahl der Spalten und Reihen für Ihr Grid-Layout fest.
- Passen Sie den Abstandswert an, um den Abstand zwischen Gitterzellen zu steuern.
- Die Vorschau wird in Echtzeit aktualisiert, um Ihr Grid-Layout anzuzeigen.
- Kopieren Sie den generierten CSS-Code in Ihr Projekt-Stylesheet.
Häufig gestellte Fragen
Was bedeutet 1fr?
Die fr-Einheit stellt einen Bruchteil des verfügbaren Platzes im Grid-Container dar. repeat(3, 1fr) erstellt drei Spalten gleicher Breite, die den Platz gleichmäßig teilen.
Kann ich feste und flexible Spalten mischen?
Ja. Sie können fr-Einheiten mit festen Größen wie 200px 1fr 1fr kombinieren, um ein Seitenleisten-Layout mit flexiblen Hauptinhaltsbereichen zu erstellen.