Grid

Mittels der Grid CSS Eigenschaft kann man ein Raster für das Layout der Seite erstellen. Im Gegensatz zu Flexbox kann man in einem grid Raster auch Elemente erstellen, die sich über mehrere Spalten oder Reihen erstrecken.

Video Tutorials zu dieser Seite

Zu dieser Seite habe ich einige Video Tutorials bei Youtube erstellt. Dort werden die hier aufgeführten Sachverhalte und Beispiele erklärt.

  1. CSS Grid Video Teil 1 Grid erstellen, Basics
  2. CSS Grid Video Teil 2 Tracks erstellen Cells positionieren und Spanning
  3. CSS Grid Video Teil 3 implicite tracks, Ausrichten, Verteilen

Navigation

Links

Siehe auch dieses sehr gute deutsche Einsteiger-Tutorial mit Beispielen CSS Grid Einsteiger Tutorial bei entwickler.de
Complete Guide to CSS Grid ein umfangreiches Werk in english
Ein CSS Grid Videovortrag von Sven Wolfermann in deutsch in einem ruhigen, gemäßigtem Tempo mit anschaulichen Beispielen und Tafeln (sehr lang).
Weitere Tipps: Grid w3schools / Grid by Example / selfHTML

Html

<div id="wrapper">

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

</div>

CSS

Man definiert im Elternelement das Raster und legt die Anzahl der Spalten grid-template-columns fest. Legt man die Anzahl der Reihen nicht fest, werden soviel Reihen erzeugt wie benötigt werden. Das hängt dann von der Anzahl der Elemente ab.

Man kann ein Grid als Blockelement oder als Inline Element anlegen:

Grid als Blockelement

Die Cells sind Blockelemente. Gibt man eine Breite an, haben sie die Breite des verfügbaren Raums.

#wrapper{ display:grid;
grid-template-columns: auto auto auto;
}

Beispiel

Grid als Inline Element

Die Cells sind inline-Block Elemente. Ihre Breite wird durch den Inhalt bestimmt.

#wrapper{display:inline-grid;
grid-template-columns: auto auto auto;}

Beispiel


Grid Terminologie

 

 

Spalten festlegen

grid-template-columns

Hier legt man die Anzahl der Spalten und die Breite oder Aufteilung der Spalten fest. Die Anzahl der Spalten wird durch die Anzahl der Werte bestimmt. Das folgende Beispiel erzeugt 3 Spalten. Die Anzahl der Reihen geschieht implizit.

grid-template-columns: auto auto auto;

grid-template-colums
Eigenschaft Wert Bedeutung
Anwendbar display: grid / display: inline-grid
grid-template-columns auto automatische Aufteilung anhand des Inhalts
px, em, rem, vw absolute Einheiten
% Prozent
1fr Anteil der verfügbaren Breite, Fraction, Teil, Freespace
minmax(60px,200px) Mindestgröße und Höchstgröße. Will man nur der beiden Größen definieren, weist man der anderen den Wert auto zu. minmax(100px, auto);
repeat(12, 100px)
Hier werden 12 Spalten von 100 Pixel Breite erzeugt
repeat(auto-fill, 100px) Mittels auto-fill werden soviele Spalten erzeugt wie in die Gesamtbreite des Grid-Containers passen. Es verhält sich wie die flex-wrap: wrap; Eigenschaft des Flexbox Modells.
[start-line] 1fr [main-line] 2fr Man kann zustätzlich eigene line-names vergeben, welche dazu dienen Elemente über mehrere mehrere Tracks zu spannen oder zu versetzen Beispiel

Wie schon bei der Eigenschaft flex, kann man über eine Zahl die Breite oder Aufteilung der Spalten bestimmen. Dazu nimmt man bei Grid die Einheit fr (fraction / Teil / Freespace). fr definiert den verfügbaren Platz. Im folgenden Beispiel ist die erste Spalte doppelt so breit wie eine der beiden anderen Spalten.

grid-template-columns: 2fr 1fr 1fr;
Beispiel

Es gibt noch eine zweite Möglichkeit die Anzahl der Spalten zu bestimmen. Mittels repeat(4, 1fr) Der erste Parameter bestimmt die Anzahl, der zweite die Breite.

grid-template-columns: repeat(4, 1fr);
Beispiel

Die Größe der Cells lässt sich mit minmax(100px, 300px) bestimmen. Der erste Wert ist die Mindestgröße, der zweite die Höchstgröße.

grid-template-columns: repeat(4, minmax(200px, 400px));

Beispiel

Mit auto-fill werden soviele Spalten erzeugt wie möglich.

grid-template-columns:repeat(auto-fill, 500px);

Beispiel

Feste Maßeinheiten. Außerdem sieht man am folgenden Beispiel, dass das vierte Element in die nächste Reihe rutscht, weil nur 3 Spalten definiert wurden.

grid-template-columns: 100px 200px 300px;

Beispiel

Feste Maße und ausgefüllter Raum in der Mitte. Die beiden äußeren Spalten haben einen festen Wert von 6em. Die Mitte nimmt den verfügbaren Raum ein.

grid-template-columns: 6em 1fr 6em;

Beispiel

Die Breite passt sich dem Inhalt an.

grid-template-columns: auto auto auto;

Beispiel

Hier ein klassisches Layoutbeispiel eines mittig plazierten Containers mit einer minimalen und maximalen Breite.

grid-template-columns: 1fr minmax(100px, 200px) minmax(200px,700px) 1fr;

Beispiel

Automatische Höhenanpassung

Wenn man keine Höhen definiert passen sich die Elemente an die Inhalte an. Das war mit herkömmlichen CSS Techniken nicht so einfach möglich. Im folgenden Beispiel haben die beiden Elemente der zweiten Zeile und das Elment in der dritten Spalte die gleiche Unterkante.

Beispiel

Reihen festlegen

grid-template-row

Mittels grid-template row kann man Anzahl und Höhen der Reihen festlegen.

grid-template-rows
Eigenschaft Wert Bedeutung
Anwendbar display: grid / display: inline-grid
grid-template-rows auto automatische Aufteilung anhand des Inhalts
px, em, rem, vh absolute Einheiten
% Prozent
1fr Anteil der verfügbaren Breite, Fraction, Teil, Freespace
minmax(60px,200px) Mindestgröße und Höchstgröße
repeat(12, 100px) Hier werden 12 Spalten von 100 Pixel Breite erzeugt
[start-line] 1fr [main-line] 2fr Man kann zustätzlich eigene line-names vergeben, welche dazu dienen Elemente über mehrere mehrere Tracks zu spannen oder zu versetzen Beispiel

Beispiel

Zwischenräume

grid-gap, grid-column-gap, grid-row-gap

grid-gap ist die Kurzschreibweise für grid-column-gab und grid-row-gap. 1 Wert definiert den Abstand für Reihen und Spalten. Man kann auch 2 Werte mit Leerzeichen getrennt einsetzen. Der erste Wert ist der Reihenabstand, der zweite der Spaltenabstand.

grid-gap: 20px;

Beispiel

 

Definieren der Tracks / spanning

grid-column-start, grid-column-end, grid-row-start, grid-row-end

          .raster {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 200px 200px;
            grid-gap: 20px;
        }

		.b {
            grid-row-start: 1;
            grid-row-end: 3;
        }

Im obigen Beispiel spannt sich .b über 2 Reihen.

Achtung! Beachte dass man bei den Eigenschaftn grid-row-start und grid-row-end die Start- und Endlinie angibt und nicht die Reihen selber. Das funktioniert bei den Spalten auf gleiche Art.

Weiteres Beispiel

          .raster {
            display: grid;
            grid-template-columns: 200px 250px 150px;
            grid-template-rows: 200px 200px;
            grid-gap: 20px;
        }

        .raster div {
            border: 1px solid black;
        }
		.a {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
        }

        .b {
            grid-column-start: 3;

            grid-row-start: 1;
            grid-row-end: 3;
        }
  

Das Grid besteht aus Linien, die erste Linie liegt auf 0. In diesem Beispiel liegt die zweite vertikale Linie auf 200px und die dritte Vertikale auf 250px. Mittels grid-column-start bestimmt man auf welcher Linie das Element beginnt und mittels grid-column-end, auf welcher Linie es endet. Ändere das Beispiel ab und beobachte, wie sich die Reihenfolge der Elemente ändern kann.

Beispiel

Überlappung von Zellen

Hierbei können sich auch Zellen überlappen.

Beispiel

Liniennamen

Man kann auch selbstvergebene Liniennamen verwenden, um die Elemente zu positionieren oder über tracks zu strecken.

        #wrapper {
            display: grid;
            grid-template-columns: [start-grid] 1fr [main-start] 2fr [main-end] 1fr [end-grid];
            grid-gap: 10px;
        }
        .cell1 {
            grid-column-start: start-grid;
            grid-column-end: end-grid;
        }
 		.cell2 {
            grid-column-start: main-start;
            grid-column-end: end-grid;
        }
 Beispiel

Kurzschreibweisen

Im folgenden Beispiel sieht man dass sich die unten stehenden Eigenschaften durch die darübestehenden zusammenfassen lassen.

grid-area
grid-column grid-row
grid-column-start grid-column-end grid-row-start grid-row-end

 

grid-colum, grid-row, grid-area

Das obige Beispiel der Klasse a lässt sich auf folgendermaßen notieren. Startwert / Endwert

grid-column: 1 / 3;

Alternativ kann man mit span angeben über wieviel Spalten es sich erstreckt

grid-column: 1 / span 2;

Wenn man lediglich definieren will, dass sich ein Element über 2 Spalten erstreckt, wobei seine Position beibehalten wird, kann folgendes notieren:

grid-colum: span 2;

Beispiel

Gleiches gilt für grid-row;

 

grid-area

Mit grid-area kann man einem Element einen Namen zuweisen (siehe unten) oder man kann damit grid-column und grid-row kombnieren. Die Reihenfolge der Werte hat folgende Bedeutung:

grid-area: 1 /3 /3 / 4;

grid-row-start grid-colum-start grid-row-end grid-column-end

Alternative Schreibweise

grid-column-start:3;
grid-column-end:4;
grid-row-start: 1;
grid-row-end: 3;
 

grid-area entspricht der alternativen Schreibweise für die Klasse b des folgenden Beispiels.
In diesem Beispiel könnte man den letzten Wert für column-end weggelassen.

Beispiel

Aufteilung per Namen

grid-template-areas, / grid-area

Das bestimmen eines Layouts über die oben aufgeführten Möglichkeiten, kann etwas unübersichtlich sein, vor allen Dingen, wenn sich bei einem responsive Design die Aufteilung öfter ändert. Hier bietet sich eine namentliche Aufteilung der Element an mittels: grid-template-areas

Zuerst weist man jedem CSS Selektor mittels grid-area einen Namen zu:

article {
  grid-area: article;
}
nav {
  grid-area: nav;
}
section {
  grid-area: section;
}
aside {
  grid-area: aside;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}
  

Dann erfolgt die Verteilung mittels grid-template-areas

 grid-template-areas: 
  "header header header"
  "nav nav nav"
  "section article aside"
  "footer footer footer";
  

Beispiel

Auch wenn diese Art anfangs etwas aufwändig ist, so erweist sie sich spätestens bei den media-queries als sehr übersichtlich.

Leere Zellen

Durch einen Punkt oder mehrere Punkte kann man leere Zellen definieren.

 grid-template-areas: 
  "header header header"
  ".... nav ...."
  "section .... aside"
  "article footer footer";
  

Beispiel

Selbstverständlich würde folgendes Beispiel nicht funktionieren, denn da würde das einzelne nav Element in 2 Teile zerlegt.

 grid-template-areas: 
  "header header header"
  "nav .... nav"
  "section article aside"
  "footer footer footer";

Implicit Tracks

grid-auto-columns / grid-auto-rows

siehe mdn Siehe css-tricks

In diesem Beispiel wurde die Anzahl der Spalten implicit festgelegt.
Es wurde nicht mit grid-template-columns: eine bestimmte Anzahl von Spalten definiert, sondern die Anzahl der Zellen ergeben sich weil Cell .a sich über drei Spalten erstreckt.

.a  {
         grid-column:  span 3;
    }

Beispiel

Mittels grid-auto-columns hat man die Möglichkeit bei impliciten Tracks die Breiten der Spalten festzulegen und mit grid-auto-rows die Höhen der Reihen. Auch hier kann man minmax() einsetzen.

.grid {
  grid-auto-columns: minmax(140px, 300px);
  grid-auto-rows: minmax(60px, auto);
}
Beispiel

Reihenfolge in Reihen oder Spalten

grid-auto-flow

mögiche Werte: row, column, dense

In den folgenden Beispielen haben wir ein Grid mit 4 Reihen und 2 Spalten. Im Grid Container liegen 6 Cells.
grid-auto-flow: columns ordnet die Zellen in der Reihenfolge von oben nach unten an..
grid-auto-flow: rows; von links nach rechts. Siehe folgende Beispiele

grid-auto-flow: columns;
grid-auto-flow: rows;

Wenn man ein implizites Grid erzeugt, indem man einzelne Zellen an bestimmte Positionen setzt. Werden nicht positionierte Zellen nach einem bestimmten Algorithmus angeordnet, den man mit grid-auto-flow bestimmen kann.

Die nicht positionierten Zellen ordnen sich in Spalten an:

Beispiel 1 grid-auto-flow: column;

Die nicht positionierten Zellen ordnen sich in Reihen an.

Beispiel 2 grid-auto-flow: row;

Achtung! Vergleiche beide Beispiele. In diesen beiden Beispielen sind nicht genügend Items vorhanden, um bei auto-flow-colums genügend Spalten zu erzeugen um item 5 auf Linie 5 zu platzieren und bei auto-flow-rows nicht genügend Reihen, um item 1 und item 5 über 3 Reihen zu strecken.

dense

dense weist den automatischen Platzierungsalgorithmus an, zu versuchen, früher im Raster Löcher zu füllen, wenn später kleinere Objekte auftauchen.

#n1 {
            grid-row-start: 3;
            background-color: #84ebf4;
    }

#n4 {
            grid-column-start: 2;
            background-color: #ef72f4;
    }
	

Beobachte genau das Verhalten der Elemente der folgenden Beispiele.

row, column, column dense, row dense

Items ausrichten

justify-items (Grid-Container) / justify-self (Grid-Item)

Es gibt mehrere Eigenschaften, um den Inhalt der Items auszurichten. justify-items ist eine Eigenschaft, die man auch dem Grid Container zuweisen kann. justify-self weist man den Items zu. Die möglichen Werte und deren Auswirkungen sind gleich:

justify-self und justify-items richtet ein Gitterelement innerhalb einer Zelle entlang der Inline-Achse ( Zeilenachse ) aus. Im Gegensatz zu align-self welches die Ausrichtung entlang der Blockachse (Spaltenachse) bestimmt. Der Wert gilt für ein Gitterelement in einer einzelnen Zelle.

justify-self & justify-items
Eigenschaft Wert Bedeutung
Standard stretch
Anwendbar display: grid / display: inline-grid
justify-self ist anwendbar auf die Items innerhalb eines Grid-Containers
justify-items start richtet das Gitterelement so aus, dass es an der Startkante der Zelle anliegt
end  richtet das Gitterelement so aus, dass es bündig mit der Endkante der Zelle ist
stretch füllt die gesamte Breite der Zelle aus (dies ist die Standardeinstellung)
center richtet das Gitterelement in der Mitte der Zelle aus

 

Im folgenden Beispiel wurde einigen Items justify-self zugewiesen.

Beispiel

align-items (Grid-Container) / align-self (Grid-Item)

Mit align-items und align-self richtet man die Elemente entlang der Blockachse aus (vertikal).
align-items weist man den Grid-Container zu, um alle Elemente entsprechend ausrichten.

align-items-self & align-self
Eigenschaft Wert Bedeutung
Standard stretch
Anwendbar display: grid / display: inline-grid
align-self ist anwendbar auf die Items innerhalb eines Grid-Containers
align-items start richtet das Gitterelement so aus, dass es an der Oberkante der Zelle anliegt
end  richtet das Gitterelement so aus, dass es bündig mit der Unterkante der Zelle ist
stretch füllt die gesamte Höhe der Zelle aus (dies ist die Standardeinstellung)
center richtet das Gitterelement in der Mitte der Zelle aus

 

Im folgenden Beispiel bekommen einige Items die Eigenschaft align-self und werden somit vertikal entsprechend ihres Wertes ausgerichtet (oben, mittig, unten).

Beispiel

Achtung! Es folgt ein typisches Layout Beispiel. Im Container #wrapper befinden sich 3 Div Elemente. .projekte, .aktuell, .bild

<div id="wrapper">  
		<div class="projekte> </div>
		<div class="aktuell"> </div>
		<div class="bild> </bild>
</div>	

Im #wrapper werden alle Items oben ausgerichtet align-items: start

.aktuell überspannt 2 Reihen.

#wrapper {
		display: grid;
		grid-template-columns: 2fr 1fr;
		align-items: start;
		grid-gap: 10px;
		max-width: 700px;
		margin:auto;
}
 .aktuell {
            grid-row-start: 1;
            grid-row-end: 3;
            grid-column-start: 2;
        }
	

Warum erscheint das Bild nicht oben?

Beispiel

Der Grund ist, die Höhe der Reihen wurde nicht definiert. Dadurch sind alle Reihen gleich hoch. Die erste Reihe benötigt den Wert auto, die zweite Reihe füllt den restlichen Raum aus mit 1fr.

#wrapper {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto 1fr;
		align-items: start;
		grid-gap: 10px;
		max-width: 700px;
		margin:auto;
}

Beispiel

place-items (Grid Containter) / place-self (Grid- Item)

place-self fasst align-self und justify-self zusammen. Es ist die Kurzschreibweise für beide Eigenschaften. Der erste Wert ist für align-self, der zweite justify-self. Eine Wert weist beiden Eigenschaften den gleichen Wert zu.

place-items: align-self(Wert1 vertikal) justify-self(Wert2 horizontal)

Beispiel

Alle Items im Grid Container verteilen

Wenn die Items feste Breiten und oder Höhen haben und deren Gesamtgröße kleiner ist als die Größe des Grid-Containers, lassen sich diese Items verteilen oder ausrichten. Die Eigenschaft justify-content bezieht sich auf die horizontale Achse und align-content auf die Vertikale. Beide Eigenschaften gibt es auch für das Flexbox Modell.

justify-content (Grid Container)

Wenn die Zellen feste Maße haben (Pixel, em, rem) und der Container breiter ist als alle Zellen in der Breite, kann man diese Zellen auf verschiedene Weise horizontal ausrichten oder verteilen:

justify-content
Eigenschaft Wert Bedeutung
Standard start
Anwendbar display: grid / display: inline-grid
justify-content start richtet das Gitter so aus, dass es bündig mit der Startkante des Gittercontainers ist
end richtet das Gitter so aus, dass es bündig mit der Endkante des Gitterbehälters abschließt
center richtet das Gitter in der Mitte des Gittercontainers aus
stretch ändert die Größe der Rasterelemente, damit das Raster die gesamte Breite des Rasterbehälters ausfüllen kann, das überschreibt allerdings nicht eine width Eigenschaft des Items.
space-around Platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, mit halb so großen Feldern am anderen Ende
space-between platziert zwischen jedem Rasterelement einen geraden Abstand, wobei an den anderen Enden kein Platz vorhanden ist
space-evenly platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, einschließlich der äußeren Enden

 

Wenn die Zellen feste Maße haben (Pixel, em, rem) und der Container breiter ist als alle Zellen in der Breite, kann man diese Zellen auf verschiedene Weise horizontal ausrichten:

justify-content: