CSS Grid und die Browserkompatibilität

Mit der neuen Version von Microsoft Edge wurde der Fluch des Internet Explorers zwar nicht gelöst, allerdings unterstützt nun auch der letzte populäre Browser das lang ersehnte CSS Grid – das künftig kraftvollste Werkzeug im CSS-Schuppen, welches den Pixelschubser zum Kästchenschubser befördern soll.
Das CSS Grid wird unseren fleißigen Gestaltern in absehbarer Zukunft erlauben den Programmierern ein Stück Unabhängigkeit abzuhandeln, indem sie in der Lage sind, gesamte Gestaltungsraster mithilfe von CSS zu erstellen.

Was ist das CSS Grid?

CSS Grid ist ein neues Layout System, welches unseren Webdesignern neue und effizientere Wege ebnet vollwertige Gestaltungsraster aufzubauen und das ohne lästige Eingriffe in den HTML Code. Die Ausnahme bildet hier das einmalige Einfügen der Container-Elemente.

Das Grid-System ermöglicht zum ersten Mal Inhalte mit CSS vollständig neu anzuordnen. Im Gegensatz zu gegenwärtig sehr beliebten Methoden, wie dem float-Befehl oder der moderneren flexbox-Methode ist die Einordnung, in Höhe und Breite, also Reihen und Spalten, möglich.
Bedeutend ist das insofern, dass die völlig freie Anordnung von Inhalten bisher nur mühsam über Drittanbieter oder komplizierten HTML Mark-ups möglich war und das Verwerfen dieser Methoden nun an Fehlerquellen, überflüssigen Code und Zeit spart.

Dazu kommt noch die Tatsache, dass nicht bloß die Container selbst frei angeordnet werden können und in der Größe anpassbar sind, sondern auch die Inhalte den Containern fest zugeordnet werden können. Das bedeutet, dass das CSS Grid Web Designern ermöglicht, mit den richtigen Befehlen im CSS, gesamte Inhalte effektiv auf vertikaler und horizontaler Achse zu verschieben und damit ein völlig neues Layout zu erstellen.

Wie kann ich CSS Grid einsetzen?

Wie zuvor erwähnt bildet ein Container als Elternelement die Grundlage eines CSS Grids. Dieser Container dient als Definitionsrahmen des Gestaltungsrasters und beherbergt die Inhalte als Kind-Elemente, die später in dem Grid angeordnet werden.
Diesem Elternelement kann nun in CSS mithilfe der Angabe display:grid; mitgeteilt werden, dass in diesem Container CSS Grid verwendet wird. Mit den Eigenschaften grid-template-columns und
grid-template-rows können entsprechend Spalten und Zeilen in beliebiger Anzahl und Größe in den Container eingearbeitet werden.

 

 

Vorteile durch CSS Grid

• Kein nachträglicher Eingriff in HTML Datei erforderlich
• Vereinfachung des HTML Codes
  • Verringerung der Dateigröße
  • Optimierung der Ladezeiten
• 2-dimensionale Ausrichtung der Inhalte
• Verzicht auf Drittanbieter und Work-Arounds