CSS/Tutorials/Grid/Einführung

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Grid
Wechseln zu: Navigation, Suche

Das Gestaltungsraster (engl. grid für Gitter oder Raster) ist ein Ordnungssystem in der visuellen Kommunikation, das als Hilfskonstruktion die Organisation von grafischen Elementen auf einer Fläche oder in einem Raum erleichtert. Bereits im Mittelalter wurden bei Handschriften vor dem Schreiben einfache Raster auf eine Seite gezeichnet, um eine einheitliche Einteilung der Seiten eines Buches zu erhalten. Auch die Codices (ca. 700–900 n.Chr.) der Maya zeigen eine regelmäßige Einteilung durch erkennbare Hilfslinien, die das Lesen vereinfachen sollen.[1]

Im Webdesign waren das Tabellen-Layout der 90er und die Entwicklung von „CSS-Frameworks“ wie bootstrap Versuche, Webseiten übersichtlich mit Rastern zu gestalten. Allerdings benötigten diese Ansätze eine Vielzahl von zusätzlichen HTML-Elementen, die das Markup an sich unübersichtlich werden ließen und das Prinzip der Trennung von Inhalt, Präsentation und Verhalten missachteten.

Mit dem CSS Grid Layout Modul ist nun endlich eine Lösung gefunden worden. Teilweise ist es sogar möglich, alle CSS-Festlegungen im Grid-Container vorzunehnen, was responsive Flexibilität und spätere Änderungen sehr erleichtert.


Aufbau eines Gestaltungsrasters[Bearbeiten]

Ein Raster besteht grundsätzlich aus senkrechten Spalten (engl. columns) und waagerechten Zeilen (engl. rows). Genau genommen befinden sich dort aber nur Rasterlinien (engl. grid lines). Zwischen zwei Rasterlinien befinden sich die eigentlichen Spalten und Zeilen (grid tracks).

Grid-1-Ersatz.png

Ein Bereich innerhalb von zwei horizontalen und vertikalen Rasterlinien heißt Zelle (grid cell). Sie können aber auch durch Positionsangaben mehrere Zellen überspannen und Rasterbereiche (grid-area) mit mehreren Zellen bilden.

Abstände[Bearbeiten]

Im Design stoßen die einzelnen Zellen und Rasterbereiche im allgemeinen nicht direkt aufeinander, sondern haben einen Außenabstand (engl. gutter für Rinne) zwischen Inhalt der Zelle und der eigentlichen Grenze. Dieser Abstand existiert nur zwischen den Zellen; nicht jedoch am äußeren Rand des Rasters. Grid-2-Ersatz.png

Empfehlung: Realisieren Sie Spalten- und Zeilenabstände nicht durch Leer-Spalten bzw. Zeilen (die dann evtl. versehentlich mit Inhalt gefüllt werden), sondern …
  • klassisch mit margin
  • oder im Grid Layout mit gap.
Beachten Sie: Während der Abstand margin für die einzelnen Rasterelemente festgelegt wird, wirkt gap auf das gesamte Raster.

Flexbox oder Grid Layout[Bearbeiten]

Jeffrey Zeldman empfiehlt den Einsatz von Grid Layout, wenn ein Layoutraster erstellt werden soll, von Flexbox, wenn bestehende Inhalte ein Layout erhalten sollen.[2]

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

„Flexbox dient im Wesentlichen dem Layout von Objekten in einer Reihe oder einer Spalte. Grid ist für ein Layout in zwei Dimensionen - Reihen und Spalten.“ Rachel Andrew[3]

Änderung der Anordnung[Bearbeiten]

Sie können im Grid Layout die Reihenfolge der Elemente unabhängig von HTML-Markup bestimmen. Dies erreichen sie entweder über eine feste Positionierung mit grid-row und grid-column oder über die schon aus Flexbox bekannte Eigenschaft order.

Browser-Support[Bearbeiten]

Achtung!

Das Grid Layout Modell ist in allen modernen Browsern implementiert:
  • Chrome 57 (März 2017),
  • Firefox 52 (März 2017)
  • Edge 16 (Okt. 2017)
  • Opera 44 (März 2017)
  • Safari 10.1 (Mai 2017) und iOS Safari 10.3

In früheren Versionen von Chrome, Firefox und Opera können Sie die Darstellung in Ihrem Browser durch das Setzen von "experimental Web Platform features" ermöglichen.

für Internet Explorer 10-11:

  • -ms-grid-... (Internet Explorer 10 unterstützt eine ältere Syntax)

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Die Implementation im IE beherrscht aber nur wenige der zusammenfassenden Eigenschaften, so dass es sinnvoll ist, die Festlegungen für das Grid Layout innerhalb einer @supports -Regel zu definieren und ein herkömmliches Design als Fallback anzubieten.

Obwohl der IE 11 in Deutschland (Stand: Juli 2018) noch eine nennenswerte Zahl an Nutzern hat, wurde in dieser Doku aus Mangel an Zeit und Arbeitskraft auf die browserspezifischen Versionen mit -ms- verzichtet.


Quellen[Bearbeiten]

  1. Wikipedia: Gestaltungsraster vom 16.07.2017
  2. Jeffrey Zeldman auf Twitter
  3. Rachel Andrew: Should I use Grid or Flexbox?