Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Gridset im t3n-Praxistest: Wir zeigen euch den responsive Gridbuilder

Gridset im Einsatz. (Screenshot. gridsetapp.com)

Gridset will einen wichtigen Teil des Entwicklungsprozesses von Webseiten vereinfachen: das Grid-System. Wir verraten dir, was das Tool zu bieten hat und ob sich sein Einsatz lohnt.

Responsive Webdesign verlangt Webworkern viel ab. Web-Entwicklung kann schon bei einer Auflösung sehr komplex und herausfordernd sein – die Notwendigkeit, verschiedenste Bildschirmgrößen bedienen zu müssen, führt jedoch zu einem komplizierten Entwicklungsprozess.

Was ist Gridset?

Gridset ist ein Online-Tool, das die Entwicklung von responsiven Grids radikal vereinfachen will. Nun gibt es zahlreiche andere Tools, die eine ähnliche Funktionalität bieten. Im Prinzip sind sie jedoch nichts anderes als etwas komplexere Taschenrechner, die uns die Größen und Abstände unserer Grids berechnen und im entsprechendem Code ausgeben.

Gridset will mehr sein, als nur ein Taschenrechner. Mit Gridset steht eine Werkzeugsammlung zur Verfügung, mit der Entwickler eine variable Anzahl von Grid-Systemen bauen können. Um dir einen besseren Einblick in die Funktionsweise von Gridset zu geben, haben wir das Tool unter die Lupe genommen.

Funktionsweise von Gridset

Nach dem obligatorischen Login steht dir eine Liste zur Verfügung, die dir deine schon entwickelten Gridsets anzeigt. Du kannst entweder dazu übergehen, ein Gridset zu bearbeiten oder ein neues zu erstellen. Mit einem Klick auf den Button „New Set“, kannst du mit der Entwicklung beginnen. Falls du das willst, kannst du auch auf schon definierte Templates zugreifen und sie nach deinen Wünschen anpassen.

Auf der linken Seite des Editors können wir verschiedene Grids anlegen. In unserem Test beschränken wir uns auf diese drei:

  • Darstellung auf mobilen Geräten
  • Darstellung auf Tablets
  • Darstellung auf Desktop-Auflösungen

Diese Grids sind frei erweiterbar, sodass im Prinzip uneingeschränkt viele Sets aufgebaut werden können. Und: Jedes der Grids können wir unseren Anforderungen entsprechend anpassen. Als Ausgangsposition steht in jedem der neu angelegten Grids ein 1-Grid-Layout zur Verfügung. Um das Grid anzupassen, nutzen wir die Steuerungselemente im oberen Bereich des Editors. Hier können wir festlegen, wie viele Spalten das Grid beinhalten soll, wie groß die Spaltenabstände (Gutter) zwischen den einzelnen Spalten sind und bei welcher Viewport-Breite diese Aufteilung in Kraft treten soll. Natürlich müssen die Grids nicht gleichmäßig aufgeteilt werden. Mit dem Dropdown-Menü, das sich hinter „Ratio“ verbirgt, können wir verschiedene Aufteilungen für das Grid festlegen.

Gridset Interface
Mit Gridset erstellst du intuitiv und visuell flexible Grid-Systeme. (Screenshot: Gridset)

Die Werte lassen sich aber auch nach einem Klick auf die jeweilige Spalte noch mal individuell anpassen. Einzelne Spalten können per Drag & Drop untereinander vertauscht werden. Mit dem Feld „Class Prefix“ können wir ein Präfix für das Grid festlegen. So wird später das Hinzufügen der jeweiligen CSS-Klassen im HTML zum Kinderspiel. Zwar können wir selbst bestimmen, wie die Präfixe heißen sollen, hier sind wir jedoch auf maximal drei Zeichen festgelegt. Wir beschränken uns auf „m“ für Mobil, „t“ für Tablet und „d“ für Desktop.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst