Erfahren Sie, wie CSS-Rastereigenschaften mit Griddy.io funktionieren

Wenn Sie mit der Webdesign-Technologie Schritt halten, sollten Sie sich mit CSS-Grids auskennen. Diese Eigenschaften sind neue Ergänzungen zum CSS3-Format und sie werden schnell zum besten Freund des Entwicklers.

Wir haben kürzlich ein unterhaltsames Spiel vorgestellt, mit dem Sie die Eigenschaften des CSS-Rasters erlernen können, aber Spiele vermitteln nicht immer praktische Ideen. Hier könnte Griddy nützlicher sein.

Diese kostenlose Webapp ermöglicht es Ihnen Passen Sie Raster in Echtzeit an und aktualisieren Sie Live-Schnipsel auf der Seite. Sie können sich mit Ihrem eigenen benutzerdefinierten Raster verwirren, indem Sie Spalten, Zwischenräume und Ränder definieren und die Seite neu strukturieren, um zu erfahren, wie Rastereigenschaften funktionieren.

Griddy ist eigentlich eine kostenloses Lernwerkzeug für Frontend-Entwickler die mehr über CSS-Grids verstehen wollen.

Mit dieser WebApp können Sie neue Elemente in das Raster einfügen, andere Elemente entfernen und deren Größe ändern, um sie an das gewünschte Layout anzupassen.

Die Webapp verfügt über verschiedene Abschnitte mit unterschiedlichen Eingabefeldern zum Bearbeiten von Rastereigenschaften. Hiermit können Sie die Rasterzeilen / -spalten neu formatieren und Sie lernen es genau das, was du tust nach dem Weg.

Sie können Spaltenlücken definieren, Rasterelemente ausrichten und mit Ausrichtungseinstellungen spielen - alles durch diese Formularfelder. Bei jeder Änderung werden die Vorschau und das kleine Code-Snippet darunter automatisch aktualisiert.

Auf diese Weise können Sie das CSS einfach kopieren und in Ihr eigenes Stylesheet einfügen, wenn Sie es weiter vertuschen möchten. Ziemlich cool!

Griddy mag nicht so viel Spaß machen wie Grid Garden, aber Griddy ist eine praktische Methode, um zu lernen visuell verstehen wie die CSS-Rastereigenschaften Seitenelemente beeinflussen.

Um damit herumzuspielen, besuchen Sie einfach die Griddy-Homepage. Sie können Ihre Gedanken oder Fragen auch mit dem Ersteller auf Twitter @drewisthe teilen.