CSS, HTML und Javascript mit {stil}

CSS Grid – das Layout-Raster

CSS GRID–Layout - Raster für die Positionierung

CSS Grid ist ein Raster für das Layout von Webseiten: Es teilt dem verfügbaren Raum in Zeilen und Spalten (Tracks) und belegt Bereiche (Areas) für Header, Main, Sitebar und Footer. Das Grid-Raster ähnelt dem Tabellenlayout und auch dem Raster der Layoutprogramme wie InDesign oder XPress, aber tastet die logische Reihenfolge der Inhalte nicht an.

Weil das Grid-Layout unabhängig von der Reihenfolge der Inhalte ist, passen Media Queries das Grid an den verfügbaren Platz im Viewport des Browsers an, ohne sich um die tatsächliche Folge der Inhalte zu kümmern.

GRID-Layout – horizontale und vertikale Linien für ein Grid-Raster

CSS grid erzeugt die Rasterstruktur anhand von horizontalen und vertikalen Linien. Die Linien sind nummeriert und beginnen bei 1. Ein negativer Index beginnt am Ende der Linien: -1 spricht die letzte Spalte an, egal, wieviele Spalten vorhanden sind.

Die Eigenschaften grid-template-rows und grid-template-columns legen die Zahl und den Platz für Tracks (Sammelbegriff für Zeilen und Spalten) an und können dabei den Linien auch Namen geben.

.main { 
   display: grid; 
   grid-template-columns: startsidebar 240px col1 1fr col2 1fr col3 1fr;
   grid-row: 1;
   grid-column: 2 / 5;
}

legt ein Raster mit 4 Spalten an: Die erste Spalte (Sidebar) ist 240px breit, die übrigen Spalten teilen sich den verfügbaren Raum mit jeweils 1fr (flexibles Fragment / Bruchteil).

Kein Support für CSS display: grid mit diesem Browser

grid-layout
Logo und Title
Slide / Header Image
overlay

Blog

Blog

Blog

Blog

Blog

Blog
Sitebar

Eigenschaften des Grid-Containers

Die Eigenschaften des Grid-Containers bilden die Struktur des Grids. Diese Eigenschaften bestimmen die Zahl und die Breite/Höhe der Spalten und Zeilen. Die Anordnung der Inhalte wird durch die Eigenschaften der Grid Items bestimmt.

display: grid | inline-grid
Erklärt den Container zum Grid-Container. Alle direkten Kind-Elemente innerhalb des Grid-Containers werden zu Grid Items.
grid-template-columns: [line1] lenght …; oder
grid-template-columns: 240px 1fr 1fr 1fr; oder
grid-template-columns: min-content auto auto auto; oder
grid-template-columns: 240px repeat(3,1fr)
Namen (optional) und Breiten der Spalten
Mögliche Breitenangaben sind:
  • min-content: kleinste Breite, die nicht zu einem Overflow führt
  • max-content: kleinste Breite, in die der Inhalt passt
  • auto: füllt den verfügbaren Platz
  • minmax(min,max)
  • fit-content (%)
  • repeat (n, width, width …): wiederholt die Breitenangaben n mal
grid-template-rows: [line1] lenght [line2] lenght [line3] lenght
Namen (optional) und Höhe der Zeilen
Höhenangaben können in Pixel, % oder fr (Fraction, Bruchteil), minmax(), fit-content, repeat()
grid-template-areas: [string]
Namen für Grid-Areas verbessern wieder die Lesbarkeit und heben die Struktur des Rasters hervor. Die Namen werden zeilenweise als Strings in Hochkommas notiert.
  • Jeder String erzeugt eine Zeile und jedes Wort der Zeile bezeichnet eine Spalte.
  • Alle Zeilen müssen dieselbe Zahl von Namen aufweisen.
  • Punkte . stehen für Bereiche (Areas) ohne Namen:
    grid-template-areas: "logo    title title title"
                         "sidebar blog  blog  blog"
                         "left      .     .     .";
    .logo { grid-area: logo; }
    .blog { grid-area: blog; }
    
grid-template: none | [grid-template-rows] [grid-template-columns] | [line-names]
kurz für die Definition von Spalten, Zeilen und Areas
grid-column-gap
Abstand zwischen Spalten (am Anfang und am Ende des Grids entstehen kein Spaltenzwischenraum)
grid-row-gap
Abstand zwischen Zeilen (am Anfang und am Ende des Grids entstehen kein Spaltenzwischenraum)
grid-gap
Kurz für grid-column-gap und grid-row-gap
grid-auto-columns
Die Breite von Spalten außerhalb des ursprünglichen Rasters: Werden Grid-Items außerhalb des Grid-Rasters definiert, wird der Browser eine weitere Spalte am Ende des definierten Rasters einfügen.
Würde im Beispiel oben eine Spalte 7 eingefügt, würde der Browser die Spalten 5 und 6 automatisch erzeugen und die Breite der Spalten entsprechend grid-auto-columns setzen.
grid-auto-rows
Die Höhe von Zeilen außerhalb des ursprünglichen Rasters. Wenn zusätzliche Zeilen keinen Inhalt haben, ist ihre Höhe 0 (als wäre es z.B. ein leeres div-Element).
grid-auto-flow: row | column | dense

Unterschied zwischen flex und grid

display: flex ist die Technik der Wahl für die zeilen- oder spaltenweise Anordnung von Elementen – flex realisert lineare Strukturen.

display: grid realisiert eine zweidimensionale Struktur – ähnlich wie eine Tabelle –, in der sich einzelne Elemente über mehrere Zeilen oder Spalten erstrecken können.

Browser-Unterstützung für Grid

Firefox unterstützt das Grid seit Version 52 (März 2017), Chrome und Opera haben Grid seit Chrome 57 (auch März 2017) an Bord, Safari 10.1 und iOS Safari sind dabei ( Mai 2017).

Microsoft Edge hat die Original-Implementierung aus IE11 übernommen, aber Microsoft hat angekündigt, dass es ein Update auf die aktuelle Spezifikation geben wird.

IE10 und IE11 unterstützen eine veraltete Version des Grids und es gibt keine Aussicht auf ein Update, obwohl IE11 noch ein paar Jahre erhalten bleibt.

C S S G R I D 12345123456 Header mit LogoOverlaySlideSidebarBlogBlogBlogBlogBlogBlogFooter