CSS/Eigenschaften/grid

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

grid-layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen. Dabei kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

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

Details: caniuse.com

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.[1]

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[2]


Hinweis

Die Spezifikationen zu grid-layout wurden mehrfach geändert.

Der Internet Explorer verwendet eine Version mit dem Browserpräfix -ms-..., die nicht mehr in allen Teilen der Spezifikation entspricht.


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

Grid-Container[Bearbeiten]

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;
}

grid-rows und grid-columns[Bearbeiten]

Bereits hier können Sie mit grid-rows und grid-columns Reihen und Spalten anlegen:

Beispiel
body {
  width: 100%;
  display: grid;
  grid-columns: 20% 80%;
  grid-rows: auto auto auto;
}

Folgende Angaben sind hier möglich:

  • Längenangabe: in px, % oder als Berechnung mit calc()
  • auto: die Maße werden dem Inhalt angepasst,
  • fr: Restwert (fraction unit), der der Berechnung calc(100% -100px-100px) entspricht
Beispiel
body {
  grid-rows: 100px 1fr 100px;
}
  • minmax(): Mindest- und Maximalangabe
Beispiel
body {
  grid-rows: 100px minmax (250px 1fr) 100px;
}
Header und Footer sind immer 100px hoch, während der mittlere Teil eine Mindesthöhe von 250px hat. Mit dieser Festlegung wäre ein fixierter Footer möglich.

Grid-Items[Bearbeiten]

Rasterposition festlegen[Bearbeiten]

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

Beispiel
header {
  grid-column: 1;
  grid-row: 1;
  grid-column-span: 2;
}
nav {
  grid-column: 1;
  grid-row: 2;
}
 
main {
  grid-column: 2;
  grid-row: 2;
}
Der Header erstreckt sich auf die erste Reihe und erste Spalte. Da er die gesamte Breite einnehmen soll, wird mit grid-column-span:2; festgelegt, dass er die zusammengefasste Breite von Navigation und Hauptteil (main) bekommen soll. Die Navigation befindet sich in der ersten Spalte der zweiten Reihe links neben dem Hauptteil.

Ä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), Chrome 57 (März 2017), Opera 44 sowie Safari 10.1 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.

Quellen[Bearbeiten]

  1. Jeffrey Zeldman auf Twitter
  2. Rachel Andrew: Should I use Grid or Flexbox?

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: