CSS/Eigenschaften/grid

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Grid)
Wechseln zu: Navigation, Suche

Das Grid Layout Module ist wie Flexbox eine sehr moderne Möglichkeit, responsive und flexible Layouts zu erstellen. Dabei wird ein Raster angelegt, indem sich die Kindelemente ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear bequem und flexibel positionieren (lassen).

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

Details: caniuse.com

Einführung[Bearbeiten]

Der Gestaltungsraster (engl. grid) sind 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 dasPrinzip der HTML/Tutorials/Trennung von Inhalt, Präsentation und Verhalten missachtete.

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). Durch Positionsangaben können daraus dann erst Zellen und Rasterbereiche (grid-area) mit mehreren Zellen gebildet werden.

ToDo (weitere ToDos)

Beispielgrafik


Empfehlenswert ist es, Spalten- und Zeilenabstände (engl. gutter für Rinne) nicht durch Leer-Spalten bzw. Zeilen zu realisieren (die dann aus Versehen mit Inhalt gefüllt werden), sondern klassisch mit margin oder im Grid Layout mit grid-gap zu arbeiten.

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]

Grid-Container[Bearbeiten]

Das Grid Layout unterscheidet zwischen dem Elternelement Grid-Container und den darin enthaltenen Rasterelementen (Grid-Items).

display: grid[Bearbeiten]

Die Grid-Container werden durch grid bzw. inline-grid definiert und können eine Breite, bzw. Mindest- oder Maximalbreite haben.

Beispiel
body {
  display: grid;
}

Erzeugen von Spalten und Zeilen[Bearbeiten]

Einer der faszinierendsten Aspekte ist die Erzeugung der Rasterstruktur. Hier können Sie bereits im Grid Container die Größe und Position der einzelnen Rasterelemente (Grid Items) festlegen.

explizite Erzeugung[Bearbeiten]

Mit grid-template-columns können Sie Anzahl und Breite der Spalten,
mit grid-template-rows Anzahl und Höhe der Zeilen explizit festlegen.

Beispiel: Grundraster ansehen …
body {
  display: grid;
  grid-template-columns: auto auto auto; 
}
Der body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente können nun innerhalb eines Rasters angeordnet werden.

Mit grid-template-columns: auto auto auto; werden nun drei Spalten festgelegt, deren Breite und Höhe sich an den Inhalt anpassen und die über den verfügbaren Platz verteilt werden.

Die sechs Kindelemente nehmen zwei Zeilen oder Reihen ein.

Es gibt im Beispiel keine explizite Festlegung von Zeilen, diese werden implizit erzeugt.

implizite Erzeugung[Bearbeiten]

Wie im oberen Beispiel zu sehen ist, müssen Sie nicht alle Spalten und Zeilen von vornherein definieren. Wenn Sie mehr Grid Items als die im Raster definierten Spalten oder Zeilen verwenden, wird implizit für jede über die definierte Zahl hinausgehende Spalte oder Zeile eine weitere Spalte bzw. Zeile erstellt, deren Breite bzw. Höhe auf auto (an Inhalt anpassen) festgelegt wird.


feststehender Footer[Bearbeiten]

Beispiel: Grundraster ansehen …
body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;	
  grid-template-rows: 150px 1fr 1fr 100px;
  min-height: 100vh;
}
...
footer {
  grid-column: 1 / span 3;
  grid-row:    4;					
}
Der body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente können nun innerhalb eines Rasters angeordnet werden.

Mit grid-template-columns: 1fr 3fr 1fr; werden nun drei Spalten festgelegt, die den verfügabren Raum im Verhältnis der Bruchteile (hier 1 : 3 : 1) untereinander aufteilen. Mit grid-template-rows: 150px 1fr 1fr 100px; werden nun vier Zeilen festgelegt. Während die obere und untere Zeile feste Höhe haben, teilen die beiden mittleren Zeilen den verfügbaren Raum unter sich im Verhältnis der Bruchteile fr (hier 1:1) unter sich auf.

Die sechs Kindelemente (Grid Items) werden mit grid-column und grid-row passend positioniert; der footer nimmt zum Beispiel den Raum zwischen 4. und 5. horizontaler Rasterlinie (also die 4. Zeile) ein. In grid-column ist festgelegt, dass er an der ersten vertikalen Rasterlinie beginnt und (alle) 3 Spalten überspannt.

Grid-Items[Bearbeiten]

Wie im letzten Beispiel schon angerissen, können die Grid Items beliebig im Raster platziert und dimensioniert werden:

Rasterposition festlegen[Bearbeiten]

Mit den Eigenschaften grid-row und grid-column, bzw. grid-column-start und grid-row-start können Sie nun die Position im Raster festlegen:

Änderung der Anordnung[Bearbeiten]

Natürlich ist es auch möglich, mit media queries die Anordnung der Elemente an den Viewport anzupasssen:

Beispiel
@media all and (max-width: 30em) {
  nav {
    grid-column: 1;
    grid-row: 2;
  }
 
  main {
    grid-column: 1;
    grid-row: 3;
  }
}
Bei kleinen Viewports werden Navigation und Hauptteil (main) nicht mehr neben- sondern untereinander angeordnet.

Browser-Support[Bearbeiten]

Achtung!

Das Grid Layout Modell ist in Firefox seit Version 52 (März 2017), in Chrome 57 (März 2017), in Opera 44 sowie in Safari 10.1 (Mai 2017) und iOS Safari 10.3 implementiert.

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+ und Edge:

  • -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 2017) noch eine nennenswerte Zahl an Nutzern hat, wurde in dieser Doku aus Mangel an Zeit und Arbeitskraft auf die browserspezifischen Versionen mit -ms- verzichtet. Der Edge wird in der kommenden Version 16 die standardisierten Eigenschaften implementieren.

Quellen[Bearbeiten]

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

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Artikel

englisch

  • http://cssgridgarden.com/ (ein Spiel vom Autor des "Flexbox Froggy, mit dem Sie spielerisch den Umgang mit CSS-Grids kennenlernen)


Beachten Sie: Verwendet veraltete Syntax!

Polyfill: