CSS Grid-Systeme und Grid-Generatoren für Webdesigner

CSS Raster-Systeme sind eine tolle Hilfe, um Webdesign-Layouts besser zu strukturieren, und die Programmierung später so effizient wie möglich zu machen. Wenn man noch nie mit einem Raster-System gearbeitet hat, erscheint die Verwendung der Grids zuerst etwas kompliziert. Aber es ist eigentlich gar nicht so schwierig, und für alle Grid-Newbies finden sich etliche Tutorials und Erklärungen im Netz. Für den Einstieg in die Welt der Raster-Systeme habe ich eine kleine Liste der beliebtesten Grids, Tools, und Tutorials zusammen gestellt.

Kostenlose CSS Grid-Systeme und -Frameworks

1. 960 Grid System

CSS Grid-Systeme und Grid-Generatoren

960 ist bestimmt eines der meist verwendeten CSS Grid-Systeme. Das System funktioniert mit einem 12- oder 16-spaltigen Layout. Als Hilfsmittel kannst du dir Template-Vorlagen für die verschiedensten Grafikprogramme herunterladen. Außerdem findest du auf der Webseite etliche Links zu hilfreichen Tutorials und Dokumentationen.

2. Blueprint

CSS Grid-Systeme und Grid-Generatoren

Blueprint ist ein vielseitiges Rastersystem. Es beinhaltet eine CSS Reset-Datei, eine CSS-Datei für Schrift-Styles, sowie Formular- und Print-Styles. Außerdem gibt es etliche hilfreiche Tools und Vorlagen zum downloaden. Auf der Webseite blueprintsites.com kannst du dir Webseiten anschauen, die mit dem berühmten Framework erstellt wurden.

3. YAML – Yet Another Multicolumn Layout

CSS Grid-Systeme und Grid-Generatoren

YAML hat den großen Vorteil, dass es eine umfangreiche Dokumentation und Webseite auf deutsch gibt. Mit YAML kannst du schnell flexible Layouts erstellen, und das Grundlayout ist durch CSS-Bausteine leicht zu erweitern.

4. BlueTrip

CSS Grid-Systeme und Grid-Generatoren

Das BlueTrip Grid-System basiert auf einem 24-spaltigem Raster-System, hat umfangreiche Schriften-Styles und ein Print-Style für die Druckversion deiner Webseite.

5. Fluid 960 Grid System

CSS Grid-Systeme und Grid-Generatoren

Fluid 960 ist ein auf jQuery basierendes, flexibles Grid-System mit dem 960er Grid als Vorlage. Du kannst die 12- und 16-spaltigen Layouts entweder mit flexibler oder fixer Breite verwenden.

6. YUI Grid

CSS Grid-Systeme und Grid-Generatoren

Mit dem YUI Grid System kannst du flexible oder fixe Seitenlayouts generieren. Eine super Hilfe bei der Verwendung des YUI Grids ist das Cheat Sheet, das du dir auf der Webseite herunterladen kannst.

7. Elastic CSS Framework

CSS Grid-Systeme und Grid-Generatoren

Elastic ist ein einfach zu nutzendes CSS Framework mit flexiblen Spalten-Kombinationen. Auf der Webseite findest du gute Video-Tutorials und Erklärungen.

8. Typogridphy

CSS Grid-Systeme und Grid-Generatoren

Typogridphy basiert auf dem 960er Grid-System, ist aber besonders darauf ausgelegt »Typografie-freundliche« CSS-Raster zu erstellen.

Online Grid-Generators und -Tools

Eine super Hilfe bei der Erstellung von Raster-Vorlagen sind Online Grid-Generatoren. Hier eine kleine Auswahl der beliebtesten Tools.

1. Grid System Generator

CSS Grid-Systeme und Grid-Generatoren

Der Grid System Generator erstellt CSS / HTML Vorlagen für fixe Raster. Außerdem kannst du dir ein Hintergrund-Bild deines Grids erstellen, dass du in einem Grafikprogramm als Unterlage verwenden kannst.

2. Gridr Buildrrr

CSS Grid-Systeme und Grid-Generatoren

Ein einfacher Grid-Generator für fixe Layouts. Dein erstelltes Raster kannst du per URL mit anderen teilen.

3. YAML Builder

CSS Grid-Systeme und Grid-Generatoren

Der Grid-Builder von YAML ist ein hilfreiches Tool, um dein eigenes Raster-System zu erstellen. Hast du dein Grid fertig, kannst du dir den Quellcode downloaden.

4. Gridinator

CSS Grid-Systeme und Grid-Generatoren

Ein umfangreicher, übersichtlicher Grid-Generator. Den fertiges Grid kannst du dir als Bild-Vorlage, CSS oder HTML Code herunterladen.

5. Variable Grid System

CSS Grid-Systeme und Grid-Generatoren

Basierend auf dem 960er Grid kannst du mit dem Variable Grid Generator schnell eine CSS-Vorlage deines Rasters erstellen.

6. YUI CSS Grid Builder

CSS Grid-Systeme und Grid-Generatoren

Der YUI CSS Grid Builder ist ein umfangreiches Tool zum Erstellen eines Grid-Systems, den Quellcode deines Grids kannst du dir online anzeigen lassen.

7. Grid Generator von Design by Grid

CSS Grid-Systeme und Grid-Generatoren

Ein einfaches Tool, um ein PNG-Image deines gewünschten Rasters als Layout-Vorlage zu erstellen.

8. Gridfox – The Grid Layout Firefox Extension

CSS Grid-Systeme und Grid-Generatoren

Gridfox ist zwar kein Grid-Generator, aber das super praktische Firefox-Addon legt dir über jede beliebige Webseite im Firefox-Browser das entsprechende Raster-System.

Lesestoff und Tutorials zum Thema Grid-Systeme

Im Nettuts-Tutorial »Prototyping With The Grid 960 CSS Framework« findest du eine ausführliche Anleitung zum Arbeiten mit dem 960er Grid-System.

»Design a Fresh Blog Theme on the 960 Grid« ist eine weitere Anleitung mit vielen Screenshots zur Verwendung des 960er Grids.

Der Nettuts-Artikel »A Detailed Look at the 960 CSS Framework« ist eine tolle Erklärung des 960er Grid-Systems.

In »A Closer Look At the Blueprint CSS Framework« erfährst du alles über das Blueprint Raster-System.

Der Artikel »Das aktuelle YUI 3 CSS Framework im Praxistest« bespricht ausführlich des YUI 3 Frameworks. Ein toller Artikel auf deutsch.

The Grid System ist eine Webseite mit unzähligen Artikeln und Infos zum Thema Grid-Systeme.

Was hältst du von Raster-Systemen im Webdesign? Nutzt du Grid-Systeme und wenn ja, welche Tools und Systeme sind deine Favoriten? Ich freue mich schon auf dein Feedback!

16 Kommentare

  1. Liebe Ellen, vielen Dank für die vielen tollen Link-Tipps. Ich arbeite schon seit langer Zeit mit dem 960 Grid System und bin sehr zufrieden damit. Einige deiner Tipps werde ich mir aber auch mal anschauen. Vor allem Typogridphy und einige der Generatoren sehen vielversprechend aus.

  2. Hallo Ellen, wirklich eine klasse Übersicht die du hier zusammengestellt hast. Aber ich habe in meiner über 10-jährigen Karriere noch nie eines dieser CSS-Grid-Systeme verwendet und werde es wohl mit großer Wahrscheinlichkeit auch nie tun.

  3. Vielen Dank für eure Kommentare :-)

    @Barbara: Mit dem 960er habe ich auch schon gearbeitet, und finde es nach kurzer Einarbeitung ebenfalls klasse :-) Für einfacherer Layouts gefällt mir der Gridinator Grid-Generator besonders gut. Hast du dein aktuelles WordWeb-Theme auch auf dem 960er aufgebaut?

    @Webstandard-Blog: Freut mich, dass dir die Übersicht gefällt :-) Ja, ich weiß, Grids sind nicht jedermanns Sache ;-) Ich arbeite manchmal mit einem Grid, manchmal ohne, je nach Projekt. Vielleicht ergibt es sich ja doch einmal, dass du ein Grid verwenden möchtest. Z.B. für ein Magazin-Theme, da kann ein Raster-System doch sehr hilfreich sein :-)

  4. @Ellen: Ja, ich arbeite eigentlich immer mit dem 960 Grid System. Allerdings nur in der Photoshop-Phase. Den Rest mache ich normalerweise von Hand.

  5. Vielen Dank für die gute Übersicht Ellen. Ich verwende auch seit längerem das 960.gs Grid und bin auch sehr zufrieden damit. Was ich noch empfehlen kann ist das Hashgrid (http://hashgrid.com). Dies erzeugt einen Overlay direkt auf der Seite. Sehr empfehlenswert während der Entwicklung ;-)

  6. @Andi: Vielen Dank für deinen Kommentar und den tollen Tipp :-) Hashgrid hört sich super an, dass muss ich unbedingt ausprobieren :-)

    Sag mal, bist du nicht gerade in Beijing?
    Viele Grüße und Zhaoshang Hao ;-)
    Ellen

  7. Hallo Ellen, vielen Dank für die Übersicht. Raster-Systeme sind wirklich eine große Hilfe. Ich selber arbeite mit dem 960-Grid und der Grid-Fox kommt ebenfalls regelmäßig zum Einsatz.
    Vor einiger Zeit habe ich das GridEasy gefunden. Es basiert auf dem 960-Grid und ist um einiges flexibler. Schau’s dir einfach mal an: http://grideasy.blogpimp.de/

  8. @Heike: Vielen Dank für deinen Kommentar und deinen tollen Tipp :-) GridEasy kannte ich noch nicht, das möchte ich unbedingt mal ausprobieren. Super finde ich auch, dass es auf Deutsch dokumentiert ist :-)

    Vielen Dank und viele Grüße
    Ellen

  9. Hallo Ellen, schöne Zusammenstellung. Bisher arbeite ich mit dem 960er Grid in Photoshop und codiere mit YAML. Heute habe ich mir das erste mal die HTML- und CSS-Basis der Grid-Systeme angesehen. Dazu motiviert hat mich auch dein Artikel „Raster mit System“ in der c’t 18/2010 – danke vielmals für deine Anregungen!
    (In der Beispiel-HTML-Datei zu dem c’t-Artikel für das 960er-System, die auf heise.de zur Verfügung steht, hat sich übrigens ein Mini-Fehler eingeschlichen, und zwar wird dort die reset.css als letztes eingebunden, mit der Konsequenz, dass die Styles aus der text.css überschrieben werden. Vielleicht lässt sich das ja noch korrigieren.)
    Viele Grüße
    Olaf

    • Hallo Olaf,

      vielen herzlichen Dank für deinen Kommentar und das tolle Feedback. Es freut mich sehr, dass dir der Beitrag zum Thema Grid-Systeme so gut gefallen hat :-)

      Vielen Dank auch für deinen Hinweis auf den kleinen Fehler in der Beispiel-Datei auf heise.de Ich werde das sofort an die heise-Redaktion weiterleiten.

      Beste Grüße,
      Ellen

  10. Hallo Ellen,

    den Bericht in der c’t habe ich heute erst gelesen und dachte gleich: „Ellen Bauer, der Name kommt mir doch bekannt vor :-)“. Eine kurze Suche hier im Blog gab dann die Bestätigung. Respekt und Glückwunsch zu dem Artikel.
    Deine Aufstellung hier ist aber ebenfalls super und ich werde mir einige Systeme bei Gelegenheit mal näher anschauen. Mit dem 960er und dem YAML arbeite ich ganz gerne, aber auch nicht immer.

    Viele Grüße
    Thomas

    • Hallo Thomas,

      vielen herzlichen Dank für dein tolles Feedback zu meinem CSS Grid c’t Artikel. Es freut mich sehr, dass du den Artikel als einer unserer Blog-Leser quasi „entdeckt“ hast :-)

      Wir nutzen auch besonders gerne das 960er Grid, wenn es sich von den Maßen anbietet. Und in letzter Zeit finde ich auch das Thema flexiblere Lösungen z.B. mit Hilfe von media queries zu finden, sehr spannend. Hier ist ein toller Artikel von A List Apart zum Thema Responsive Web Design.

      Ganz viele Grüße,
      Ellen

      • Hallo Ellen,

        den von Dir genannten Artikel von a List Apart hatte ich kürzlich schon gelesen gehabt und er hatte mich sehr beeindruckt. Ich schätze, dass wir in Hinsicht auf die immer stärkere Nutzung von mobilen Endgeräten mit sehr unterschiedlichen Auflösungen verstärkt in diese Richtung denken und entwickeln müssen.

        Viele Grüße
        Thomas

        • Hallo Thomas,

          ja der Artikel hatte mich auch sehr fasziniert. Ich finde diese Ansätze sehr sehr spannend und würde am liebsten alles gleich umsetzen :-) Ich denke auch, dass Webdesign auch in der nächsten Zukunft auf jeden Fall super spannend bleibt und wir noch so einiges zu tun haben werden ;-)

          Viele Grüße,
          Ellen

  11. Hej Ellen,
    ich beschäftige mich derzeit mit einem umfangreichen Projekt, dessen Grundlage eine Gridsystem-Analyse und Auswahl darstellen wird.

    In den letzten Kommentaren werden auch mobile Anwendungen angesprochen. 960gs ist bisher mein Favorit aber gerade im Bezug auf mobile-devices finde ich auch das Beispiel des 1140px CSS GRID sehr interessant -> http://cssgrid.net/.

  12. Ich überlege ob es hilfreich wäre einen Schreibblock mit einem universellen Grid zum Skizzieren von Webseiten zu drucken (z.B. DIN A4-Block, 50 Blatt, am Kopf geleimt). Was haltet ihr von der Idee? Ist so ein universelles Grid machbar/sinnvoll – oder kommt es doch immer sehr auf den konkreten Bedarf an?

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *