CSS/Tutorials/Grid/Einführung

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

Informationen zu diesem Text

Lesedauer
15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Das Gestaltungsraster (grid (englisch für Gitter, 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 vorzunehmen, was responsive Flexibilität und spätere Änderungen sehr erleichtert.

Browser-Support[Bearbeiten]

Das Grid Layout Modell ist seit März 2017 in allen modernen Browsern implementiert, sodass Sie es problemlos einsetzen können.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Für Internet Explorer 10-11 gab es eine Version, die einen Browserpräfix verwendete.

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


Beachten Sie: Da der IE 11 in Deutschland (Stand: März 2020) nur noch eine vernachlässigbare Zahl an Nutzern hat, wurde in dieser Doku auf die browserspezifischen Versionen mit -ms- verzichtet.

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

Fallback durch @supports-Regel
div > * {
  display: inline-block;
  margin: 1em;
}

@supports (display: grid) {
  div {
    display: grid;
    gap: 1em;
  }

  div > * {
    margin: 0;
  }
}

Die Angabe von display: grid hätte auch außerhalb der @supports-Regel notiert werden können, da ältere Browser diese einfach als unbekannt ignoriert hätten. Ihre Wirkung entfaltet die @supports-Regel erst mit der Festlegung der Abstände, etc des gesamten Designs.

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]

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.svg

Ein Bereich innerhalb von zwei horizontalen und zwei vertikalen, jeweils benachbarten 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.svg

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.


Abstände mit gap und margin
.gridContainer {
  display: grid;
  gap: 1em;
  margin: 0em;
}
.gridContainer > .kleiner {
  margin: 2em;
}

Der Grid-Container erhält einen Außenabstand (margin) von 0em. Die einzelnen Rasterelemente erhalten jedoch einen Abstand von 1em zwischen den Elementen, nicht jedoch nach außen.

Das Element mit der Klasse .kleiner erhält einen Außenrand von 2em und wird entsprechend kleiner mit einem größeren Abstand zu den umgebenden Rasterlinien dargestellt.

Beachten Sie: Während der Abstand margin für den Außenrand des Containers, bzw einzeln für die einzelnen Rasterelemente festgelegt wird, wirkt gap auf das gesamte Raster.

Ä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.


Quellen[Bearbeiten]

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