CSS Grid - der Turbogang im Webdesign

Laura Lederle Aktualisiert am 17. Aug. 2020

Seiten schneller und effektiver gestalten im Webdesign – das Grid-System macht es möglich. Und ist ein weit verbreitetes Werkzeug, um das Leben von Webdesignern zu vereinfachen. Doch, was steckt wirklich dahinter? Kann man es für jede Website anwenden und welche Vorteile habe ich außerdem? Soviel kann ich bereits hier verraten: enorm viele!

Zuerst einmal: Was ist ein Grid System?

Ein Grid System ist, vereinfacht gesagt, ein Raster, in dem Inhalte schnell und effizient platziert werden können. Dafür werden verschiedene Media Queries und andere CSS Elemente in einem Style Sheet festgelegt und angewendet. In der Regel werden die Media Queries so definiert, dass sich das Grid System einem großen Desktop anpasst sowie einem iPad oder Smartphone. CSS Grid besteht aus 12 Spalten. Diese können ganz einfach in 6, 4, 3 oder 2 Sektoren unterteilt werden – sogenannte „breakpoints".

Um das zu veranschaulichen, habe ich einen Bespielcode innerhalb des Bodys vorbereitet (die ausführliche Version findest du auf hier):

<div class="grid grid--center">
     <div class="grid__item one-third palm--one-whole">

          <p class="demo-block">Hallo</p>
     </div><!--

     --><div class="grid__item one-third palm--one-whole">
          <p class="demo-block">Hallo</p>

     </div><!--
     --><div class="grid__item one-third palm--one-whole">

          <p class="demo-block">Hallo</p>
     </div>

</div>

Das Grid-System hat viele Vorteile.

Schnelles und effektiveres Designen, da ein Großteil des Layouts schon steht.
Durch eingebaute Media Queries und das flexible 12-Spalten-Layout passt sich das Grid-System flexibel auf große Desktop-Monitore als auch auf kleine Smartphone Displays an.
Die Bilder werden für gewöhnlich gleich mitskaliert.
Es wird kein zusätzliches Javascript oder jQuery benötigt.

Und das Beste: Es gibt zahlreiche Grid-Systeme, die alle ähnlich funktionieren und von verschiedenen Webseiten zum Download angeboten werden. Die Auswahl ist also groß.

Und leider gibt es auch ein paar Nachteile.

Nicht alle Grid-Systeme werden auf dem Internet Explorer 7 und 8 korrekt angezeigt.
Nicht alle Grid-Systeme unterstützen mobile Geräte.

Für jemanden, der noch nie mit einem Grid-System gearbeitet hat, sieht es am Anfang recht kompliziert aus. Allerdings wird schnell klar, dass die Anwendung sehr einfach ist.

Für die meisten Webseiten würde sich das Grid-System hervorragend eignen. Denn ein überwiegender Teil besitzt unterschiedliche Content-Blöcke, die ansonsten alle einzeln über die Definition Float angesprochen werden müssen. Mit dem Grid-System ist das nicht notwendig. Die Anpassung an dieses System beginnt schon beim Design. Doch muss man sich hierbei ein Konzept überlegen, das überhaupt die Verwendung eines Grid-Systems ermöglicht.

Das Grid-System KANN verwendet werden, MUSS aber nicht.

Was das heißt? Ganz einfach: Bestimmte Teile der Website können mit den Grid-Eigenschaften ausgestattet werden, während andere auf herkömmlichem Weg mit CSS bearbeitet werden. Natürlich ist es auch möglich, einzelnen Elementen eine Grid-Klasse sowie eine seperate Klasse zuzuordnen, mit der ein eigenes CSS definiert werden kann. Kompliziert? Ganz und gar nicht. Der Programmierer kann alle Vorteile des Grid-Systems nutzen, ohne auf sein individuelles Design verzichten zu müssen.

Mein Fazit.

Alles in allem ist das Grid-System eine hervorragende Möglichkeit, um seiner Seite schnell und effizient ein dynamisches Layout zu verpassen. Beispiele für bekannte und kostenlose Grid-Systeme, die auch von renommierten Webseiten genutzt werden: