Digital First: Loading

CSS
Grid
-
der
Turbogang
im
Webdesign

css-grid
css-grid

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> 

Dieses Beispiel zeigt, dass jeder Block genau 1/3 der ganzen Breite ausmacht („one- third“). Sobald das Browserfenster nur noch die Größe eines Smartphones hat, breitet sich jeder Block auf die gesamte Seitenbreite aus („palm—one-whole“). Definiert werden diese Eigenschaften im CSS Style Sheet, das schon vorgefertigt heruntergeladen werden kann.

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:

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.