CSS Grid Layout (auch bekannt als „Grid“) ist ein zweidimensionales gitterbasiertes Layoutsystem, das darauf abzielt, die Art und Weise, wie wir gitterbasierte Benutzeroberflächen entwerfen, vollständig zu ändern. CSS wurde immer verwendet, um unsere Webseiten zu gestalten, aber es hat nie sehr gute Arbeit geleistet. Zuerst verwendeten wir Tabellen, dann Floats, Positionierung und Inline-Block, aber alle diese Methoden waren im Wesentlichen Hacks und ließen viele wichtige Funktionen aus (z. B. vertikale Zentrierung). Flexbox hat geholfen, ist jedoch für einfachere eindimensionale Layouts gedacht, nicht für komplexe zweidimensionale Layouts (Flexbox und Grid arbeiten tatsächlich sehr gut zusammen). Grid ist das allererste CSS-Modul, das speziell entwickelt wurde, um die Layoutprobleme zu lösen, mit denen wir uns alle seit der Erstellung von Websites beschäftigt haben.

Ab März 2017 lieferten die meisten Browser native, nicht festgelegte Unterstützung für CSS Grid: Chrome (einschließlich Android), Firefox, Safari (einschließlich iOS) und Opera. Internet Explorer 10 und 11 unterstützen es dagegen, aber es ist eine alte Implementierung mit einer veralteten Syntax. Die Zeit, mit Grid zu bauen, ist jetzt! Um zu beginnen, musst du ein Containerelement als Raster mit display: grid; definieren, die Spalten- und Zeilengrößen mit grid-template-columns und grid-template-rows festlegen und dann die untergeordneten Elemente mit grid-column und grid-row in das Raster einfügen. Ähnlich wie bei Flexbox spielt die Quellreihenfolge der Rasterelemente keine Rolle. Ihr CSS kann sie in beliebiger Reihenfolge platzieren, wodurch es sehr einfach ist, Ihr Raster mit Medienabfragen neu anzuordnen. Stellen Sie sich vor, Sie definieren das Layout Ihrer gesamten Seite und ordnen es dann vollständig neu an, um eine andere Bildschirmbreite mit nur wenigen Zeilen CSS zu berücksichtigen. Grid ist eines der leistungsstärksten CSS-Module, die jemals eingeführt wurden.

Aktuelle Übersicht zur Browserunterstützung (sehr hilfreich): CanIUse.com

Bevor du dich wirklich mit den Grid-Konzepten befassen solltest, ist es wichtig, die Terminologie des CSS-Grids zu verstehen. Die hier verwendeten Begriffe sind alle relativ ähnlich, da besteht leicht die Gefahr, diese zu verwechseln. Durch die Rasterspezifikation wird allerdings einiges klarer und die jeweiligen Bedeutungen sind dann easy zu merken. Mache dir an dieser Stelle bitte keine Sorgen, es gibt gar nicht so viele Begriffe, wie du jetzt eventuell denkst.

Grid Contaier

Das Element, auf dem display: grid; angewendet wird. Es ist das direkte Elternelement aller Gridelemente. im folgenden Beispiel ist container der Grid Container.

Grid Item

Die Kindelemente (nur die direkten Nachkommen) des Grid Containers. Im folgenden Beispiel, sind die Elemente mit der class item Grid Items, aber das Element sub-item nicht.

Grid Line

Die Trennlinien, aus denen sich die Struktur des Grids zusammensetzt. Sie können entweder vertikal ("column grid lines") oder horizontal ("row grid lines") sein und sich auf beiden Seiten einer Zeile (column) oder Spalte (row) befinden. Im Beispiel, ist die lila Line eine "column grid line".

Grid Cell

Der Abstand zwischen zwei benachbarten Zeilen- und zwei benachbarten Spalten-Linien (row grid lines & column grid lines). Dieses ist die einzelne Einheit (Grid Cell) des Grids. Im Beispiel ist die Grid Cell zwischen den row grid lines 1 & 2 und zwischen den column grid lines 2 & 3.

Grid Track

Der Abstand zwischen zwei benachbarten Grid Lines. Du kannst dir das ganz eifach wie die Spalten und Zeilen des Grid-Rasters vorstellen. Im Beispiel ist der Grid Track zwischen der Grid Line der zweiten und dritten Row.

Grid Area

Der gesamte Raum, der von vier Grid Lines umgeben ist, ist die Grid-Area. Eine Grid Area kann aus einer beliebigen Anzahl von Grid Cells bestehen. Hier im Beispiel ist die Grid Area zwischen den row grid lines 1 & 3 und den column grid lines 1 & 3.

• display: grid;
• grid-template-columns/rows
• grid-template-areas
• column-gap/row-gap
• justify-items
• align-items
• Box-Alignment-Cheatsheet
• justify-content
• align-content

display

Definiert das Element als Grid-Container und erstellt einen neuen "grid formatting context" für seinen Inhalt. grid - erzeugt ein Grid auf Blockebene (block-level grid) inline-grid - erzeugt ein inline-grid

Das CSS sieht folgendermaßen aus:

Hinweis: Die Möglichkeit, Grids über verschachtelte Elemente (Subgrids) weiterzugebenm ist möglich, aber sehr komplex. Hierzu zwei wunderbare Links, falls du dich noch tiefer mit dem Thema der Subgrids beschäftigen möchtest: www.w3.org & rachelandrew.co.uk

grid-template-rows/grid-template-columns

Definiert die Spalten (Columns) und Zeilen (rows) des Grids mit einer durch Leerzeichen getrennten Liste von Werten. Die values repräsentieren die track-size (die jeweilige Größe) und space-between (den Abstand) repräsentiert die grid-lines.
track-size - kann ein px-wert, ein prozentsatz oder ein Bruchteil des Grids sein.
line-name/span> - ein belibiger Name.

Beispiel:

Wenn du zwischen den Values ein Leerzeichen lässt, werden den grid lines automatisch positive und negative zahlen zugeordnet.

der oben abgebildete grid-container, ergibt folgendes Grid:

grid-template-areas

Definiert ein grid-template, indem auf die Namen der grid-area verwiesen wird, die mit der grid-area Eigenschaft angegeben werden. Wenn du den Namen einer grid-area wiederholst, erstreckt sich der Inhalt über all diese Zellen. Ein Punkt kennzeichnet eine leere Zelle. Die Syntax selbst bietet eine Visualisierung der Struktur des grids.
grid-area-name - Der Name eines Bereiches innerhalb der Grid-Area.
. - Der Punkt kennzeichnet immer eine leere Grid Cell.
none - Es sind keine Grid-Areas definiert.

Beispiel:

Durch den oben abgebildeten CSS-Code wird ein Grid erstellt, dass vier Spalten (columns) breit und drein Zeilen (rows) hoch ist. Die gesamte obere Reihe besteht aus dem "header"-Bereich. Die mittlere besteht aus zwei "main"Bereichen, einer leeren Zelle und einem "sidebar"-Bereich. Die letzte Zeile ist komplett vom "footer"-Bereich abgedeckt. So sieht das ganze auf der Stage aus:

Jede Zeile muss in Ihrer Deklaration die gleiche Anzahl von Zellen haben.

Du kannst eine beliebige Anzahl benachbarter Perioden (Einträge von Werten, die mit einem Leerzeichen getrennt werden) verwenden, um eine einzelne leere Zelle zu deklarieren. Solange die Perioden keine Leerzeichen zwischen sich haben, repräsentieren sie eine einzelne Zelle.

Beachte bitte, dass du mit dieser Syntax keine Zeilen benennen kannst, sondern nur ganze Bereiche benennst. Wenn du diese Syntax verwendest, werden die Zeilen an beiden Enden der Bereiche automatisch benannt. Wenn der Name deiner grid-area foo ist, lautet der Name der starting grid column und der starting row line des Bereichs foo-start und der Name der letzten starting row line und der letzten starting grid column foo-end. Dies bedeutet, dass einige Zeilen möglicherweise mehrere Namen haben, z. B. die Zeile ganz links im obigen Beispiel, sie hat drei Namen: header-start, main-start & footer-start.

column-gap/row-gap

All diese Statements geben die Größe der Grid Lines an. Man legt also die Breite der Abstände zwischen den Zeilen und Spalten fest.
line-size - der jeweilige Wert (px, vw, fr usw)

Beispiel gefällig?

Man sieht also, das die Abstände nur zwischen den Grid Cells erstellt werden, nicht an den Aussenrändern.

justify-items

Richtet die Grid-Items entlang der Inline-Achse (Row) aus (entgegengesetzt zu align-items, welches die Items entlang der Blockachse (Column) ausrichtet). Dieser Wert gilt für jeweils alle Grid-Items im Container.
start - Richtet die Items so aus, dass sie bündig mit der jeweiligen Startkante ihrer Zelle sind.
end - Richtet die Items so aus, dass sie bündig mit der jeweiligen Endkante ihrer Zelle sind.
center - Richtet die Items zentriert in der Mitte ihrer jeweiligen Zelle aus.
stretch - füll die gesamte Breite der Zelle aus (Default-Wert)

Beispiele:

Die jeweiligen Eigenschaften können auch ohne Weiteres auf einzelne Grid Items angewendet werden. Hierzu liefert CSS3 die justify-self property.

align-items

Richtet dir Grid-items entlang der Block-Achse (Column) aus (entgegengesetzt zu justify-items, welches die Items entlang der Zeilenachse(row) ausrichtet). Dieser Wert gilt für jeweils alle Grid items im Container.
start - Richtet die Items so aus, dass sie bündig mit der jeweiligen Startkante ihrer Zelle sind.
end - Richtet die Items so aus, dass sie bündig mit der jeweiligen Endkante ihrer Zelle sind.
center - Richtet die Items zentriert in der Mitte ihrer jeweiligen Zelle aus.
stretch - füll die gesamte Breite der Zelle aus (Default-Wert)

Beispiele:

Die jeweiligen Eigenschaften können auch ohne Weiteres auf einzelne Grid Items angewendet werden. Hierzu liefert CSS3 die align-self property.

Exkurs: Box-Alignment Cheatsheet

Wert	Art	Beschreibung
auto	Kontext	Der Wert wird entsprechend dem Kontext des Elements entsprechend angepasst. Es wird der justify-items-Wert des übergeordneten Elementes zu Grunde gelegt. Wenn kein übergeordnetes Element vorhanden ist oder es auf einem Element angewendet wird, das mit absolute positioniert ist, wird der wird auf normal gesetzt.
normal	Kontext	Übernimmt das Standardverhalten des Layoutkontextes, in dem es angewendet wird. Blockebene Layouts: start Absolutpositionierung: start für ersetzte absolute Elemente und stretch für alle anderen Tabellenlayouts: Wert wird ignoriert Flexbox Layouts: Wert wird ignoriert Grid Layouts: stretch, es sei denn, ein Seitenverhältnis oder das "intrinsic sizing" verwendet wird, wird start benutzt. (für die echten Nerds: der Link zur Erläuterung des intrinsic sizings (achtung, leider nur englisch) www.w3.org
stretch	Verteilung	Erweitert das Element vertikal für align-items und horizontal für beide Kanten des Containers mit justify-items
start	Positionierung	Alle Elemente sind am Startrand (links) des Containers gegeneinander ausgerichtet
end	Positionierung	Alle Elemente sind am Endrand (rechts) des Containers gegeneinander ausgerichtet
center	Positionierung	Die Elemente sind nebeneinander in Richtung der Mitte des Containers ausgerichtet (zentriert)
left	Positionierung	Die Elemente sind nebeneinander zur linken Seite des Containers ausgerichtet. Wenn die Eigenschaft nicht parallel zu einer Standardachseoben, rechts, unten oder links ausgerichtet ist, verhält es sich nach end.
right	Positionierung	Die Elemente sind nebeneinander zur rechten Seite des Containers ausgerichtet. Wenn die Eigenschaft nicht parallel zu einer Standardachseoben, rechts, unten oder links ausgerichtet ist, verhält es sich nach start.
flex-start	Positionierung	Nur-Flexbox-Wert, verhält sich wie start
flex-end	Positionierung	Nur-Flexbox-Wert, verhält sich wie end
self-start	Selbstpositionierung	Ermöglicht es einem Element in einem Layout, sich basierend auf seiner eigenen Startseite an der Containerkante auszurichten. Überschreibt grundsätzlich, was der eingestellte Wert auf dem übergeordnetem Element ist.
self-end	Selbstpositionierung	Ermöglicht es einem Element in einem Layout, sich basierend auf seiner eigenen Endseite auszurichten, anstatt den Positionswert des Containers zu erben. Überschreibt grundsätzlich, was der eingestellte Wert auf dem übergeordnetem Element ist.
first base-line last base-line	Basislinie	Richtet alle Elemente innerhalb einer Gruppe (Zellen innerhalb einer Zelle) aus, indem ihre Ausrichtungsbasislinien abgeglichen werden. Der Defaultwert ist first wenn baseline allein verwendet wird.

justify-content

Ab und an, hast du das Problem, das die gesamte Größe deines Grids kleiner als die Größe deines Grid-Containers ist. Dies kann passieren, wenn alle Grid Items mit nicht flexiblen Einheiten, wie zB px definiert wurden (hier gibt es wunderbare Möglichkeiten mit anderen Größeneinheiten zu arbeiten, gerade im Grid bietet sich immer fr an, hierzu aber an anderer Stelle mehr). In diesem Fall, kannst du die Ausrichtung des Grids innerhalb des Gridcontainers festlegen. Diese Eigenschaft richtet das Grid entlang der Inline-Achse (row = Zeilenachse) aus (im Gegensatz dazu, wird das Grid mit align-content entlang der Block-Achse (column) ausgerichtet).
start - Richtet das Grid so aus, dass es bündig mit der Startkante des Gridcontainers abschließt
end - Richtet das Grid so aus, dass es bündig mit der Endkante des Gridcontainers abschließt
center - Richtet das Grid zentriert in der Mitte des Gridcontainers aus
stretch - Ändert die Größe der Grid items, damit das Grid die gesamte Breite des Grid Containers ausfüllen kann
space-around - platziert einen gleichmäßigen Abstand zwischen den einzelnen Grid items mit Zwischenräumen an deren Enden
space-between - platziert einen gleichmäßigen Abstand zwischen den einzelnen Grid items, ohne dass am Ende ein "Space" vorhanden ist
space-evenly - platziert einen gleichmäßigen Abstand zwischen den einzelnen Grid items, einschließlich der Enden

align-content

Manchmal ist die Größe deines Grids kleiner als die Größe deines Grid-Containers. Das kann passieren, wenn alle Grid Items mit nicht flexiblen Einheiten wie zB px ausgestattet sind. In diesem Fall kannst Du die Ausrichtung des Grids innerhalb deines Grid Containers festlegen. Diese Eigenschaft richtet das Grid entlang der Blockachse (Column) aus (im Gegensatz zu justify-content, dass das Grid entlang der Inlineachse (row) ausrichtet).
start - Richtet das Grid so aus, dass es bündig mit der Startkante des Gridcontainers abschließt
end - Richtet das Grid so aus, dass es bündig mit der Endkante des Gridcontainers abschließt
center - Richtet das Grid zentriert in der Mitte des Gridcontainers aus
stretch - Ändert die Größe der Grid items, damit das Grid die gesamte Breite des Grid Containers ausfüllen kann
space-around - platziert einen gleichmäßigen Abstand zwischen den einzelnen Grid items mit Zwischenräumen an deren Enden
space-between - platziert einen gleichmäßigen Abstand zwischen den einzelnen Grid items, ohne dass am Ende ein "Space" vorhanden ist
space-evenly - platziert einen gleichmäßigen Abstand zwischen den einzelnen Grid items, einschließlich der Enden

Kleiner Hinweis vorab:

float, vertical-align, column-*, display: inline-block; & display: table-cell; Diese Eigenschaften haben keinerlei Auswirgung aus Grid Items!

grid-row-start/grid-row-end & grid-column-start/grid-column-end

Du möchtest deine Grid Elemente innerhalbdes Grids anhand der Grid Lines positionieren? Das klappt mit grid-column-start / grid-row-start, hier legst du die "Startlinie" für das Element fest, und mit grid-column-end / grid-row-end bestimmst Du den Endwert für dein Element.

line - kann entweder eine Zahl, die sich auf die nummerierte Grid Line bezieht, oder ein, vorher im Container festgelegter, Name sein, der eine Grid Line bezeichnet.
span number - Das Element erstreckt sich über die angegebene Anzahl an Grid Tracks.
span name - Das Element erstreckt sich bis es die Zeile mit dem angegebenen Namen erreicht.
auto - Gibt die automatische Platzierung, einen automatischen span oder den default span eins an.

Beispiele:

Elemente können und dürfen sich überlappen. Um diese Elemente in ihrer "Stapelreihenfolge" zu steuern, kannst du z-index benutzen.

grid-column / grid-row

Shorthand für grid-column-start & grid-column-end beziehungsweise grid-row-start & grid-row-end. Benutze einfach den Startwert & den Endwert getrenn durch ein /.

Beispiel:

justify-self

Richtet ein Grid Item innerhalb einer Zelle entlang der Inline-Achse(row) aus (im Gegensatz dazu align-self entlang der Blockachse(column)). Dieser Wert gilt für ein Grid Item in einer einzelnen Zelle.

start - Richtet das Grid Item so aus, dass es bündig mit der Startkante der Zelle abschließt
end - Richtet das Grid Item so aus, dass es bündig mit der Endkante der Zelle abschließt
center - Richtet das Grid Item zentriert in der Mitte der Zelle aus.
stretch - füllt die gesamte Breite der Zelle aus.

Beispiele:

Um gleich die Ausrichtung ALLER Elemente im Grid festzulegen, kannst du das Verhalten der Items auch einfach im Grid Container mit justify-items beschreiben.

align-self

Du hast es dir wahrscheinlich schon denken können. Richtet ein Grid Item innerhalb einer Zelle entlang der Block-Achse(column) aus (im Gegensatz dazu justify-self entlang der Inline-Achse(row)). Dieser Wert gilt für ein Grid Item in einer einzelnen Zelle.

start - Richtet das Grid Item so aus, dass es bündig mit der Startkante der Zelle abschließt
end - Richtet das Grid Item so aus, dass es bündig mit der Endkante der Zelle abschließt
center - Richtet das Grid Item zentriert in der Mitte der Zelle aus.
stretch - füllt die gesamte Breite der Zelle aus. (Default-Wert)

Beispiele:

• Bei der Vergabe der Größen von columns und rows, kannst du alle gängigen Einheiten, wie px, rem, % usw. und Keywords wie min-content, max-content oder auto vergeben.
• Du kannst auch Funktionen benutzen, um Grenzen, für ansonsten flexible Zellen, festzulegen. Zum Beispiel, wenn du eine colummn auf 2fr setzen möchtest, diese aber nicht kleiner als 250px sein soll:
  grid-template-columns: 2fr minmax(250px, 2fr);
• Kennst du schon die repeat-funktion? Damit kannst du es dir sehr leicht machen und dir einige Zeilen Code sparen. Wenn du zum Beispiel 5 columns á 2fr erstellen möchtest:
  grid-template-columns: repeat(5, 2fr);
• Kombiniere das Ganze und dein Code wird performant, kurz und verständlich:
  grid-template-columns. repeat(auto-fill, minmax(250px, 2fr));