Die 5 besten interaktiven CSS-Grid-Layout-Generatoren für Anfänger

Blog

Die 5 besten interaktiven CSS-Grid-Layout-Generatoren für Anfänger

Die 5 besten interaktiven CSS-Grid-Layout-Generatoren für Anfänger

Seit es CSS gibt, haben Webentwickler damit zu kämpfen, Layouts damit zu entwerfen. Das Positionieren von Elementen auf einer Seite war noch nie einfach und erforderte normalerweise einen Workaround wie die Verwendung von Floats oder Tabellen, anstatt ein CSS-System speziell für diesen Zweck zu entwickeln.

All das ändert sich mit dem Aufkommen von CSS-Grids, die erst seit kurzem von allen gängigen Browsern übernommen werden. Schließlich gibt es eine einfache Möglichkeit, zweidimensionale Layouts auf einer Webseite zu erstellen und Elemente darin zu positionieren. Keine komplizierten Problemumgehungen mehr für ein so einfaches Problem.

Es gibt nur ein Problem mit CSS-Grids: Viele Entwickler, insbesondere neuere, haben Schwierigkeiten, ihre Verwendung zu erlernen! Wenn du damit zu kämpfen hast Flexboxen , dann mag das Erlernen von Rastern wie eine unmögliche Aufgabe erscheinen.

Glücklicherweise sind andere Entwickler hier, um das Internet mit ihren Grid-Layout-Generatoren zu retten. Zeigen und klicken Sie einfach oder füllen Sie einige Felder aus, und Sie haben einen Rahmen, mit dem Sie arbeiten können.

Hier ist eine Sammlung einiger großartiger Rastergeneratoren, von sehr einfachen Layout-Erstellern bis hin zu solchen, die viel komplexere Funktionen des CSS-Systems berühren.

1. CSS-Grid-Generator

An erster Stelle steht das Einfache, aber Effektive CSS-Grid-Generator . Ohne Schnickschnack oder verwirrende Add-ons, erstellen Sie einfach ein Raster, optimieren Sie einige Zahlen und kleben Sie den Code in Ihre Website, ganz einfach. Wenn Sie mit CSS-Grids noch nicht vertraut sind, ist dies ein großartiges Tool für den Einstieg.

Das ist der Bildtitel

2. Griddy

Griddy ist ein hilfreicher CSS-Rastergenerator, mit dem Sie so viele Elemente hinzufügen können, wie Sie möchten, und deren Größe basierend auf der Zeilen- oder Spaltengröße. Sie können sie nach Bruchteilen ( NS ), Pixel, Prozent oder Auto – und Sie sind nicht darauf beschränkt, eine Einheit für das gesamte Raster zu verwenden. Verwenden Sie zwei Spalten mit fr und bemessen Sie die anderen sorgfältig mit Pixeln!

Das ist der Bildtitel

3. LayoutIt

Mit LayoutIt Sie können ganz einfach Raster jeder Größe erstellen und sogar Raster in andere Raster platzieren. Fügen Sie nach Bedarf weitere Spalten und Zeilen innerhalb und außerhalb einzelner Felder hinzu und erhalten Sie die volle Kontrolle über die von Ihnen erstellten Layouts.

Das ist der Bildtitel

Vier. Gitter-Assistent

Dies ist ein Tool für fortgeschrittene Benutzer, die mehr über CSS-Raster erfahren möchten. Gitter-Assistent ist nicht nur ein einfacher Generator. Sie können den Code direkt in der Seitenleiste bearbeiten und sehen, wie er in Echtzeit aktualisiert wird. Laden Sie es dann herunter oder fügen Sie Grid Wiz als Abhängigkeit hinzu und kompilieren Sie es.

Das ist der Bildtitel

5. cssgr.id

Einer der flexibelsten CSS-Layout-Generatoren auf dem Markt, cssgr.id bietet Ihnen viele Möglichkeiten, um loszulegen. Es gibt fünf Starter-Layouts, und Sie können so viele Elemente, Spalten und Zeilen hinzufügen, wie Sie möchten. Es gibt sogar eine Platzhaltertextoption, damit Sie sehen können, wie dieses Layout in Aktion aussehen wird.

Das ist der Bildtitel

Einfaches Erstellen von Rastern in CSS

Webentwickler machen ständig Fortschritte in Richtung eines besseren und effizienteren Internet-Backends. CSS-Grids gehören zu den neuesten Entwicklungen und haben endlich ein seit langem bestehendes Problem gelöst, das CSS-Designer geplagt hat.

CSS-Grids gibt es eigentlich schon seit ihrer Einführung im Jahr 2011, aber erst 2017 haben alle großen Browser sie endlich unterstützt.

Jetzt, da Entwickler nicht mehr vorsichtig sein müssen, sie zu verwenden, gibt es eine Menge CSS-Rasteranleitungen, Tutorials und Ressourcen, genau wie diese Layout-Generatoren. Wenn Sie also immer noch einen Workaround wie Flexboxes oder sogar Floats verwenden, um Webseiten zu entwerfen, sollten Sie stattdessen Raster ausprobieren. Es gibt viele Online-Unterstützung, die Ihnen beim Erlernen hilft.

Erfahren Sie mehr

CSS-Grid-Tutorial | Responsive Crash-Kurs

Danke fürs Lesen !

#css