Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

CSS/Eigenschaften/grid

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

Mit dem Grid Layout Module ist es möglich, responsive zweidimensionale 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


Tutorials


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 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 …
Beachten Sie: Während der Abstand margin für die einzelnen Rasterelemente festgelegt wird, wirkt grid-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]

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 display: grid bzw. inline-grid definiert und können eine Breite, bzw. Mindest- oder Maximalbreite haben.

Beispiel
body {
  display: grid;
}

In der Spezifikation gibt es noch den Wert subgrid. Mit ihm soll es in Zukunft möglich werden, auch andere als direkte Kindelemente des Grid-Containers in ein Gestaltungsraster zu intergrieren.

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.

Dabei können Sie Anzahl und Größe der Spalten und Reihen explizit angeben oder dies den auto-placement-Algorithmus implizit erledigen lassen.

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ügbare Breite 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:

Responsive Grids[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.

Bequemer ist es allerdings, dies den Browser automatisch erledigen zu lassen, indem man den Rasterlementen z. B. mit der minmax-Funktion Mindest- und Maximalbreiten gibt. Der Browser ordnet diese dann automatisch im verfügbaren Raum an.


Beispiel: flexibles Grid Layout ohne media queries ansehen …
main {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  color: black;
  font: 1em/1.3 Cambria, serif;
}

main > section {
  padding: 1rem;
  background: hsl(220, 80%, 90%);
}
Für die 30 section-Blöcke werden mit grid-template-columns Spalten erzeugt. Dabei werden mit der repeat()-Funktion über das autofill-Schlüsselwort so oft wie nötig Spalten mit einer durch die minmax(20em, 1fr)-Funktion ermittelten Breite von mindestens 20em Breite und maximal einem Bruchteil erzeugt.


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