5 coole CSS Grid Generatoren

Es besteht kein Zweifel, dass CSS Grid ein unglaublich leistungsfähiges und aufregendes Tool für Webdesigner ist. Es hat eine ganze Reihe neuer Möglichkeiten in Bezug auf das Layout eröffnet. Es kann jedoch gelinde gesagt schwierig sein, sich mit der Syntax vertraut zu machen. Wenn Sie Probleme haben, helfen Ihnen CSS-Grid-Generatoren gerne weiter. Mit ihnen können Sie ein Rasterlayout visuell erstellen, und sie spucken den richtigen Code aus (oder verwenden Sie ein Top, um die Dinge noch weiter zu vereinfachen Webseitenersteller ).

Viele solcher Tools sind erschienen und wirklich nützlich, insbesondere wenn Sie kein Experte für die Syntax sind. Hier werfen wir einen Blick auf die besten Optionen. Möchten Sie mehr erfahren? Schauen Sie sich unsere Umfassender Leitfaden zu CSS Grid , siehe unseren Leitfaden zu Web-Hosting Dienste, um sicherzustellen, dass Sie die richtige für die Funktionen Ihrer Site haben, und wenn Sie viele Mediendateien haben, stellen Sie sicher, dass Sie sie sichern Cloud-Speicher .

01. Layoutit! CSS Grid Generator

Layoutit! CSS Grid Generator



wie man ein Dinosauriermodell macht

Auf unserer Liste steht dieser CSS-Grid-Generator von Layoutit! Mit diesem Tool wählen Sie interaktiv Ihre Rasterbereiche aus, fügen Schaltflächen zum Hinzufügen von Spalten und Zeilen hinzu und benennen Ihre Rasterbereiche. Sie können den Code herunterladen oder das Design als gemeinsam nutzbaren Permalink speichern.

02. cssgr.id

cssgr.id

cssgr.id bietet ähnliche Funktionen wie das vorherige Tool, jedoch eine andere Art der Benutzeroberfläche (welche Sie bevorzugen, hängt wahrscheinlich vom persönlichen Geschmack ab). Eine praktische Funktion mit diesem Tool ist, dass Sie Lorem Ipsum-Text hinzufügen können. Es ist die Arbeit des in London ansässigen Entwicklers Dan Netherton.

Verwenden Sie das iPhone als Zeichentablett für den PC

03. CSS Grid Template Builder

CSS Grid Template Builder

Diese CodePen-Demo des kreativen Entwicklers Anthony Dugois ist eine einzigartige Option in unserer Liste. Sie können das Rasterlayout hauptsächlich mit einer Zeichenfolge erstellen, die Sie bearbeiten, und dann als Wert für das in Ihr CSS einfügen Gittervorlagenbereiche Eigentum.

04. CSS Gridish

CSS Gridish

Dieses Projekt des IBM-Teams verwendet Entwurfsspezifikationen des Rasters Ihres Produkts und erstellt mehrere Ressourcen, die Ihr Team verwenden kann. Zu diesen Ressourcen gehören eine Skizzendatei mit Zeichenflächen und Raster- / Layouteinstellungen, CSS / SCSS-Code mit CSS-Raster mit einem CSS-Flexbox-Fallback sowie eine Chrome-Erweiterung.

wie man in digitaler Kunst färbt

05. CSS Grid Layout Generator

Dies ist ein relativ neues Tool von Dmitrii Bykov. Sie erstellen zunächst 'Spuren' (Spalten und Zeilen), fügen dann Elemente hinzu und exportieren den Code. Es ist etwas gewöhnungsbedürftig - der einminütige Screencast oben ist hilfreich, um Ihnen den Einstieg zu erleichtern.

Generieren Sie New York

Generate, die preisgekrönte Konferenz für Webdesigner, kehrt vom 24. bis 25. April nach NYC zurück! Klicken Sie auf das Bild, um Tickets zu buchen

Dieser Artikel wurde ursprünglich in veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Ausgabe 316 oder abonnieren .

Weiterlesen: