Das 1140px Grid-System: Mit CSS3 Media Queries für mobile Geräte optimiert

Das flexible 1140px Grid des australischen Designers und Entwicklers Andy Taylor ist mit CSS3 Media Queries umgesetzt, und passt sich so auf die unterschiedlichsten Browser-Größen an. Das Grid ist in 12 Spalten unterteilt, und sowohl für große Desktop-Monitore, für Tablet-PCs (z.B. iPad oder Samsung Galaxy Tab) und für kleinere Smartphone-Displays (iPhones, Blackberrys und Android-Phones) optimiert. Da sich das noch recht neu entwickelte Grid-System wirklich spannend anhört, habe ich mir die wichtigsten Fakten und Funktionen des Grids einmal genauer angeschaut.

1. Das 1140px Grid-System im Überblick

1140px Grid System erklaert
Die Demo-Seite des Grids.

  • Das Layout ist 1140px breit, ideal Bildschirmgrößen von 1280px (auf kleineren Monitoren passt sich das Grid entsprechend an).
  • 12 Spalten (Spaltenbreiten in Prozent, bei vollen 1140px sind die Spaltenzwischenräume ca. 40 Pixel breit), Layout kann so leicht in 6, 4, 3 oder 3 Spalten unterteilt werden.
  • Flexibles Layout durch CSS3 Media Queries (optimiert für Table-PCs und Smartphones).
  • Browser-Unterstützung: Chrome, Safari, Firefox, Internet Explorer 7 + 8, bedingt auch auf IE6 (die Bildschirm-Breite wird hier komplett ausgenutzt, da keine Unterstützung für CSS max-width).
  • Bisher vom Entwickler getestet auf verschiedenen MacBooks, iMac, PC Laptop, älteren PC, Eee PC, iPad, iPhone 3G, iPhone 4, Android Smartphones, Samsung Galaxy Tab, BlackBerry und einem älterem Nokia.
  • Bilder werden je nach Bildschirm-Ansicht flexibel kleiner skaliert.
  • Inklusive Photoshop-Vorlage zum Herunterladen.
  • Lizenz des Gridsystems: Creative Commens License, Attribution Share-Alike (3.0 Australia)

2. Grid herunterladen

Downloaden kannst du dir das Grid-System entweder direkt auf der Webseite cssgrid.net oder bei GitHub.

Für die Gestaltung des Layouts findest du unter Photoshop-Template auch noch eine praktische PSD-Vorlage zum Herunterladen auf der Webseite.

1140px Grid System erklaert
Die PSD-Vorlage für das 1140er Grids.

3. Und so funktioniert das 1140er Grid

Wenn du dir den .zip Ordner des Grids heruntergeladen hast, findest du die CSS-Dateien 1140.css, ie.css, layout.css, mobile.css, smallerscreen.css und typeimg.css in einem Extra-Ordner. In der beigefügten index.html Datei findest du den benötigten HTML-Code, der die Grundlage für deinen eigenen Code ist. Alle Dateien sind ausreichend und leicht verständlich dokumentiert, so dass eigentlich nichts schief gehen kann, sobald du dich ein wenig ist das System eingearbeitet hast.

In der Beispiel-Datei index.html werden innerhalb des head-tags alle notwendigen Stylesheets mit Hilfe von link-tags aufgerufen.

1140px Grid System erklaert
Beispiel-Code innerhalb des head-tags.

Außerdem findest du hier auch den für die Media Queries benötigten viewport meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Im body-tag von index.html ist eine vierspaltige Vorlage des Grids vorbereitet.

1140px Grid System erklaert
Beispiel-Code innerhalb des body-tags.

Die wichtigsten CSS-Klassen und CSS-Dateien erklärt

Die CSS-Klasse .container wird im Grid genutzt, um den Content der Webseite einzubinden. Der container-Div enthält 20px padding rechts und links.

Die nächste CSS-Klasse .row legt fest, dass alle Elemente zentriert und in voller Breite (max-width: 1140px) angezeigt werden.

Dann kannst du die Spalten definieren, hierzu sind die 12 CSS-Klassen .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol .twelvecol vorbereitet.

Für den Div mit der letzten Spalte benötigst du außerdem noch die CSS-Klasse .last, um den margin-right Wert für diese Spalte auf 0px zurück zu setzen.

Alle Schriften-Styles (Font-Styles von body, h1, h2, h3, p, blockquote), Links (a, a:hover, a img) und img-Styles, kannst du in der typeimg.css Datei im CSS-Ordner anpassen.

Die eigenen Styles deines Themes kannst du dann in der layout.css Datei einfügen.

Wie gefällt dir das 1140px Grid-System? Hast du Fragen zur Verwendung des CSS-Rasters oder hast du bereits eigene Erfahrungen mit dem Grid machen können? Über dein Feedback, Fragen oder weitere Tipps freue ich mich sehr!

23 Kommentare

  1. @Paul, @Andi:

    vielen Dank für euer Feedback zum Post und für den Hinweis zu den vertauschten Bildern. Ich hab’s gerade korrigiert :-)

    Viele Grüße,
    Ellen

    • Hallo Gerhard,

      danke für dein Feedback. Es freut mich das dir der Tipp zum 1140px Grid gefällt :-)

      Viele Grüße,
      Ellen

  2. Hi Ellen,
    schöner Artikel! Benutze bisher auch nur 960gs, aber das sieht wirklich spannend aus.

    Um das System mit all seinen Vorteilen unter WordPress zu nutzen, müsste man allerdings ein bischen mit den WP-Hooks spielen: Für die vom Grid vorgesehene automatische Skalierung eingefügter Bilder dürfen diese inline weder height, noch width mitbringen – was bei WordPress aber natürlich der Fall ist.
    Hat jemand vielleicht spontan eine Idee dazu?

    Auf jeden Fall merci für den Tip!

    P.S.: Übrigens produziert der Link http://cssgrid.net/ unter „2. Grid herunterladen“ einen 404 auf Eurer Website.

      • Hallo Caspar,

        danke für dein Feedback zum Artikel, den kaputten Link habe ich schon korrigiert, danke dir, für den Hinweis :-)

        Ich habe zwar das 1140er Grid bisher noch nicht in selbst in WordPress getestet, aber beim Ari-Theme funktioniert die flexible Skalierung auch trotz WP inline Styles, schau doch mal bei: http://ari.elmastudio.de/

        Die Silbentrennung macht übrigens das wp-typography Plugin möglich :-)

        Viele Grüße,
        Ellen

        • Hi Ellen,
          danke für den Plugin-Tip und die Aufklärung bzgl. des Grid!
          Ich hatte, ohne selbst zu testen, auf der Entwicklerseite gelesen, auf die Inline-Attribute müsse verzichtet werden. Wenn’s auch mit geht – umso besser! Schönes Theme übrigens, hell und freundlich! :-)

    • also ich kämpfe momentan bei wordpress nicht mit diesem inline problem, sondern mit dem „wie krieg ich bei jedem – in meinem fall – 4. entry eine „.last“ klasse dazu“-problem??

      irgendwie komm ich da auf keine saubere loop-lösung :-(

      aaaawwwwww, bin ich zu blöd dafür oder ist das echt ein bisschen gemein?

      • Ohne die genauen Umstände zu kennen hier ein recht allgemeiner Hinweis. Du musst im „loop“ die Einträge „mitzählen“ und dann per Modulo durch eine Bedingung …

        if ($count_posts % 4 == 0):
        // Ausgabe der ‚last‘ Klasse in der CSS-Eigenschaft des DIVs
        endif;

        die CSS-Klasse in das DIV einfügen, sofern der aktuelle Eintrag durch „vier ohne Rest“ teilbar ist.

        Gruß
        Claudio.

  3. Liebe Ellen, das ist ja mal wieder ein feiner Bericht. Mit Grid-Layouts habe ich mich ehrlich gesagt noch gar nicht auseinander gesetzt. Aber das ist doch jetzt mal ein Ansporn es zu versuchen.
    Mal wieder ein toller Artikel. Danke dafür!

    • Hallo Daniela,

      vielen Dank für deinen Kommentar. Es freut mich sehr, dass dir der Artikel zum Grid-Sytem so gut gefällt :-) Ja, Grids sind echt klasse, und auch bei der Layout-Gestaltung helfen sie sehr, Inhalte strukturiert unterzubringen.

      Viele Grüße und viel Spaß mit den Grids,
      Ellen

  4. Hoffe es werden daraus tolle Themes entstehen die auch toll auf Smartphones aussehen. Solche sind Mangelware bis jetzt !

  5. Schön erklärt. Mit dem 960gs gab es zumindest die unschöne Sache, dass man dann doch wieder (indirekt über Klassen) mit floats arbeiten musste. Das scheint hier ähnlich. Sehr schön finde ich auch das Stacklayout (Stacklayout.com) – hier sieht es so aus, als wäre dies ein wenig adaptiver bzgl. der Darstellung auf mobilen Geräten…

    Mich würde deine Meinung zu dem Stacklayout sehr interessieren – falls du Zeit hast : )

  6. Hi Ellen

    ich bin heute auf dieses 1140px CSS Grid System und auch auf deinen sehr informativen Artikel darüber gestoßen.
    Weißt Du vielleicht ein paar Webseiten, die dieses System verwenden?

    Übrigens:
    Mittlerweile gibt es das 1140px CSS Grid System in der zweiten Version

  7. Hallo,

    nachdem ich jetzt lange mit Anpassungen von WP-Themes rumgemacht habe, bin ich jetzt über die Gridsysteme gestolpert. Google erschlägt einen mit Infos zu disem Thema und nach ein paar Stunden dreht sich mir der Kopf.

    Was mir nch nicht so ganz klar ist… wie integriere ich das 1140-Gridsystem in WordPress, kennst Du zufällig einen guten Artikel dazu?

    Und kann ich mit gridsystemen auch ein ganz „normales“ Einspalten WP-Theme gestalten? Es ist immer nur die Rede von 2 oder mehr Spalten?

  8. Hallo

    Vielen Dank für den Artikel. Ich habe mir die neuste Version von 1140 zu Gemüte geführt. Ich finde mich rasch damit zurecht. Was ich aber komisch finde: Drehe ich das Mobilgerät, passt sich das Layout im Landscape-Modus nicht perfekt an. Ich muss die Seite von Hand kleiner zoomen. Ist mir auch bei Websites von anderen Herstellern aufgefallen – bei anderen wiederum nicht. Kennt das jemand? Gibt es da Abhilfe?

  9. Hallo,
    vielen Dank für den Artikel und dein toller Blog!!!!
    Sehr interessant mit dem neuen grid so ganz anders als das 960er…
    Kann ich gerade sehr gut gebrauchen, ich Berichte wenn ich es angewendet habe ;-)

    liebe Grüße
    Doreen

  10. Sooo wollte es gerade einbauen das gute neue Grid, aber es gibt gar keine push and pull Funktion wie beim 960er Grid. Auch keinen alpha oder omega…
    Ich finde es noch nicht ausgereift genug…

    Gruß
    Doreen

Hinterlasse eine Antwort

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