Layoutit Grid ist ein interaktiver Open-Source CSS Grid Generator. Er ermöglicht es Ihnen, Ihre Designs zu zeichnen und den Code dabei zu sehen. Sie können mit dem Code interagieren, Spaltenlinien hinzufügen oder entfernen und sie verschieben, um die Größe zu ändern – und Sie sehen, wie sich das CSS und HTML in Echtzeit ändern!
Wenn Sie mit einem Layout fertig sind, können Sie einen CodePen erstellen oder den Code kopieren, um Ihr nächstes Projekt zu starten. Das Tool rückt den Code in den Vordergrund und hilft Ihnen, CSS Grid zu lernen, während Sie direkt damit arbeiten.
CSS Grid ist eine ganz neue Art, über Layouts nachzudenken
Wir können jetzt robuste, responsive Layouts für unsere Web-Erlebnisse erstellen. Wir können endlich lernen, mit einem kohärenten Satz von Layout-Werkzeugen zu gestalten, anstatt uns Hunderte von Hacks zu merken, um Elemente in Position zu zwingen.
Nun, ich sage nicht, dass ein Generator wie dieser uns von der Kenntnis des Codes, den wir schreiben, befreit. Wir sollten alle lernen, wie CSS Grid und Flexbox funktionieren. Selbst wenn Ihr Spezialgebiet JavaScript ist, ist ein solides Fundament in CSS-Kenntnissen ein mächtiger Verbündeter, wenn es darum geht, Ihre Ideen zu kommunizieren. Wenn Sie einen Prototyp für eine Komponente, eine UX-Interaktion oder sogar einen Algorithmus in einer Online-Sandbox teilen, kann die Art und Weise, wie Ihre Arbeit präsentiert wird, einen großen Unterschied machen. Die Fähigkeit, korrekte Layouts zu entwickeln – und die Stile zu definieren, die sie erzeugen – ist grundlegend.
Layouts in CSS zu erstellen sollte keine entmutigende Aufgabe sein. CSS Grid macht tatsächlich Spaß zu benutzen! Zum Beispiel fühlt sich die Verwendung von benannten Grid-Bereichen wie eine ASCII-Art-Version des Zeichnens eines Designs auf einem Blatt Papier an. Lassen Sie uns das Layout einer Foto-App erstellen, einen Feed von Bildern und den Personen darin nebeneinander für den Hauptinhalt und den typischen Header, Footer und eine Konfigurationsseitenleiste.
.photos-app {
/* For our app layout, lets place things in a grid */
display: grid;
/* We want 3 columns and 3 rows, and these are the responsive
track sizes using `fr` (fraction of the remaining space) */
grid-template-columns: 20% 1fr 1fr;
grid-template-rows: 0.5fr 1.7fr 0.3fr;
/* Let's separate our tracks a bit */
gap: 1em;
/* We now have 3x3 cells, here is where each section is placed */
grid-template-areas:
"header header header" /* a header stretching in the top row */
"config photos people" /* a left sidebar, and our app content */
"footer footer footer"; /* and a footer along the bottom row */
}
.the-header {
/* In each section, let's define the name we use to refence the area */
grid-area: "header";
}Dies ist nur ein kleiner Teil dessen, was Sie mit CSS Grid erstellen können. Die Spezifikation ist sehr flexibel. Bereiche können auch direkt über Liniennummern oder Namen platziert werden, oder sie können vom Browser implizit platziert werden, wobei der Inhalt automatisch im Grid verteilt wird. Und die Spezifikation wächst weiter mit Ergänzungen wie subgrid.
Gleichzeitig kann die Arbeit mit Grids schwierig sein, wie alles, was eine neue Denkweise erfordert. Es braucht viel Zeit, um sich damit auseinanderzusetzen. Und eine Möglichkeit, dabei zu helfen, ist...
Lernen durch Ausprobieren
Wenn Sie CSS Grid lernen, ist es leicht, von seiner Notation und Semantik eingeschüchtert zu sein. Bis Sie etwas Routine darin entwickelt haben, kann der Einstieg in den Lernprozess mit visuellen und interaktiven Tools ein ausgezeichneter Weg sein, diese anfängliche Befangenheit zu überwinden. Viele von uns haben Generatoren benutzt, um zu lernen, wie man Schatten, Verläufe, Markdown-Tabellen usw. erstellt. Generatoren, wenn sie sorgfältig erstellt werden, sind großartige Lernhilfen.
Verwenden wir Layoutit Grid, um dasselbe Design aus unserem Beispiel nachzubilden.
Generatoren wie dieser sind nicht dafür gedacht, für immer benutzt zu werden; sie sind ein Sprungbrett. Dieser spezielle hilft Ihnen, die Kraft von CSS Grid zu erfahren, indem Ihre Designs mit wenigen Klicks materialisiert werden, zusammen mit dem Code, der es ermöglicht. Dies verschafft Ihnen die ersten Erfolge, die Sie brauchen, um mit dem Lernprozess fortzufahren. Für einige von uns bleiben Generatoren dauerhaft in unseren Werkzeugkästen. Nicht, weil wir nicht wissen, wie man Layouts von Hand erstellt, sondern weil die visuelle Rückmeldung uns hilft, unsere Ideen schnell in Code umzusetzen. Also spielen wir weiterhin damit.
Sarah Drasner hat ebenfalls einen CSS Grid Generator erstellt, der es wert ist, angeschaut zu werden.
Lernen durch Bauen
Leniolabs hat kürzlich Layoutit Grid Open Source gemacht und neue Funktionen hinzugefügt, wie interaktive Code-Ansichten, Bereichsbearbeitung, Verlauf und Offline-Unterstützung. Und es sind noch mehrere in Arbeit.
Wenn Sie Ideen zur Verbesserung des Tools haben, melden Sie sich! Öffnen Sie ein Issue und lassen Sie es uns auf GitHub diskutieren. Um auf die Meta-Ebene zu gehen: Sie können auch etwas über die CSS Grid-Spezifikation lernen, indem Sie uns beim Aufbau des Tools helfen.
Wir nutzen die App, um Best Practices für die Erstellung von performanten interaktiven Web-Erlebnissen zu verfolgen. Sie wird jetzt von dem neu veröffentlichten Vue 3 mit <script setup> Komponenten angetrieben und mit Vite erstellt, einem neuen Entwicklungstool, das die App während der Entwicklung nicht bündelt, was uns sofortiges Feedback während der Entwicklung gibt. Wenn Sie neugierig sind und mit uns bauen möchten, forken Sie das Repository und lernen wir gemeinsam!