CSS-Grid-Generator

Der CSS Grid Generator ist ein visueller Builder für CSS Grid Layout, Sie wählen aus, wie viele Spalten und Zeilen Sie wollen, wählen eine Spurgröße für jede Achse aus, stellen die Lücken und die Ausrichtung ein, und ein Vorschauraster ordnet sich in Echtzeit neu Das genaue CSS, das das erzeugt, was Sie sehen, sitzt in einem kopierfertigen Kästchen darunter, sodass Sie niemals Gitter-Vorlagen-Spalten von Hand schreiben oder Brucheinheiten im Kopf zählen müssen.

CSS Grid ist ein zweidimensionales Layoutmodell Im Gegensatz zu flexbox, das Elemente entlang einer einzigen Achse legt, steuert das Gitter Zeilen und Spalten gleichzeitig Der Container hält die Struktur durch einen kleinen Satz von Eigenschaften: Gitter-Vorlagen-Spalten und Gitter-Vorlagen-Zeilen definieren die Spuren, Lücke fügt Abstand zwischen ihnen hinzu, und Rechtfertigungs-Elemente, Ausrichtungs-Elemente, Rechtfertigungsinhalt und Ausrichtungsinhalt positionieren die Elemente und die Spuren Dieses Tool legt diese Eigenschaften in einem Panel offen und zeigt das Ergebnis sofort an.

Der Generator verwendet die Repeat () - Funktion für jede Achse mit mehr als einer Spur, also Grid-Template-Spalten: Repeat (3, 1fr) ist das, was Sie für ein dreispaltiges Gitter gleicher Spalten erhalten, anstatt einer sich wiederholenden Liste Die fr-Einheit stellt einen Bruchteil des freien Raums im Behälter dar, was die Grid-Layouts flüssig macht: Drei 1-fr-Spalten nehmen jeweils ein Drittel der Breite ein und reflow, wenn der Behälter die Größe ändert Sie können auch Auto, Min-Content, Max-Content - und Festpixelspuren aus dem Track-Size-Menü einmischen.

Alles läuft komplett in Ihrem Browser Es gibt keine Anmeldung, es wird nichts hochgeladen, und das Tool funktioniert offline weiter, sobald die Seite geladen wurde Es ist nützlich sowohl als Lernhilfe, weil Sie beobachten können, wie jede Eigenschaft das Layout ändert, als auch als schnelle Möglichkeit, produktionsfertiges Grid-CSS für eine Galerie, ein Dashboard, ein Kartenlayout oder eine ganze Seiten-Shell zu erstellen Die generierte Regel zielt auf eine Klasse mit 'Grid-Containern' ab und listet nur die Eigenschaften auf, die einen sichtbaren Effekt haben, sodass die Ausgabe sauber bleibt.