decocode decocode deco    

Raster #

Übersicht
Raster definieren
Felder verbinden
Automatisch generierte Felder
Raster im Container ausrichten
Inhalte der Felder ausrichten

Mit Hilfe der Raster-Eigenschaften in CSS lassen sich Webseiten ähnlich der klassischen Seitenaufteilung im Printbereich in definierte Felder mit definierten Abständen und anderen Eigenschaften aufteilen, um so die enthaltenen Elemente einfach und systematisch positionieren zu können.

Raster-Eigenschaften sind relativ neu in CSS und werden gegenwärtig noch nicht von allen Browsern unterstützt (s. caniuse.com). Insbesondere aus Gründen der Rückwärtskompatibilität sollte man mit dem Einsatz dieser Eigenschaften wohl noch eine Weile warten.

Raster definieren #

Üblicherweise erzeugt man ein Raster, indem man ein HTML-Blockelement (z. B. <div>) als Container der Elemente des Rasters definiert und ihm den CSS-Stil display:grid; zuweist (andere mögliche Werte sind hier inline-grid für Raster auf Inline-Ebene und subgrid für Raster innerhalb von Rastern). Es muss nicht die gesamte Seite als Raster definiert werden.

Die Abmessungen der einzelnen Spalten und Zeilen des Rasters werden mit grid-template-columns (Breiten der Spalten) sowie grid-template-rows (Höhen der Zeilen) durch eine Folge Leerzeichen-getrennter Maße festgelegt.

Die Abstände zwischen den einzelnen Spalten und Zeilen des Rasters (Stege) werden mit grid-row-gap (Abstand zwischen den Zeilen) und grid-column-gap (Abstand zwischen den Spalten) festgelegt. Diese Werte können in der Eigenschaft grid-gap zusammengefasst werden (erster Wert: Zeilenabstand, zweiter Wert: Spaltenabstand).

Quelltext auswählen
1
2
3
4
5
6
7
8
      <div style='padding:0 50px 20px; display:grid; grid-template-columns:200px 1fr 150px; grid-template-rows:100px 75px; grid-gap:5px 10px;'>
        <div class='t' style='background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:green;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:blue;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>

Als Wert für grid-template-columns sowie für grid-template-rows können die üblichen Maßeinheiten, auto für eine gleichmäßige Aufteilung des undefinierten Raumes, sowie die Maßeinheit fr verwendet werden. In diesem Fall wird das Maß als Fraktion des undefinierten Raumes entsprechend der voangestellten Zahl berechnet. Werden für einzelne Spalten des Rasters beispielsweise 1fr, 2fr und 3fr angegeben, so ist eine Fraktion 1/6 des undefinierten Raumes (1 + 2 + 3 = 6). Die erste Spalte ist also 1/6, die zweite 2/6 und die dritte 3/6 des undefinierten Raumes breit.

Im Gegensatz zu normalen Blockelementen, werden die Felder des Rasters nicht ausgedehnt, wenn der Inhalt eines Feldes mehr Platz benötigt, um vollständig angezeigt zu werden.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Felder verbinden #

Um einzelne Felder eines Rasters miteinander zu verbinden, kann die Struktur des Rasters mit der Eigenschaft grid-template-areas angegeben werden. Der Wert dieser Eigenschaft ist eine Liste von in doppelten Anführungszeichen gesetzten Namen der einzelnen Elemente des Rasters, die in den Eigenschaften grid-area zugewiesen wurden.

Quelltext auswählen
1
2
3
4
5
6
      <div style='grid-template-areas:"feld1 feld2 feld3" "feld1 feld4 feld4"; padding:0 50px 20px; display:grid; grid-template-columns:200px 1fr 150px; grid-template-rows:100px 75px; grid-gap:5px 10px;'>
        <div class='t' style='grid-area:feld1; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-area:feld2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-area:feld3; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-area:feld4; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Die Eigenschaften grid-template-areas, grid-template-columns und grid-template-rows können in der Eigenschaft grid-template zusammengefasst werden.

Quelltext auswählen
1
2
3
4
5
6
      <div style='grid-template:"feld1 feld2 feld3" 100px "feld1 feld4 feld4" 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-area:feld1; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-area:feld2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-area:feld3; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-area:feld4; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>

Es lassen sich auch nur die Eigenschaften grid-template-rows und grid-template-columns zusammenfassen. Wird grid-template-areas nicht definiert, müssen Felder des Rasters auf andere Weise verbunden werden, wie im nächsten Beispiel erläutert wird.

Quelltext auswählen
1
2
3
4
5
6
      <div style='grid-template:100px 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:3; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:2; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:2; grid-column-end:4; grid-row-start:2; grid-row-end:3; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>

Die Ausdehnung der einzelnen Felder kann statt per grid-template-areas auch explizit als Attribut der entsprechenden Elemente angegeben werden. Hierzu werden folgende CSS-Eigenschaften verwendet:

grid-column-start (Anfang der Spalte)
grid-column-end (Ende der Spalte)
grid-row-start (Anfang der Zeile)
grid-row-end (Ende der Zeile)

Als Wert gibt man die laufende Nummer des Steges (des Zwischenraums) an, der sich an der entsprechenden Seite der gewüschten Spalte bzw. Zeile befindet, wobei die Zählung mit 1 beginnt.

Quelltext auswählen
1
2
3
4
5
6
      <div style='grid-template:100px 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:3; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:2; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:2; grid-column-end:4; grid-row-start:2; grid-row-end:3; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>

Für Elemente, die sich über mehrere Felder des Rasters erstrecken, kann auch die Anzahl dieser Felder als Wert von grid-column-end bzw. grid-row-end angegeben werden. In diesem Fall wird vor dieser Zahl das Schlüsselwort span notiert.

Quelltext auswählen
1
2
3
4
5
6
      <div style='grid-template:100px 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:span 2; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:2; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column-start:2; grid-column-end:span 2; grid-row-start:2; grid-row-end:3; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>

Die Eigenschaften grid-column-start und grid-column-end sowie grid-row-start und grid-row-end können in den Eigenschaften grid-column und grid-row zusammengefasst werden.

Quelltext auswählen
1
2
3
4
5
6
      <div style='grid-template:100px 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-column:1 / 2; grid-row:1 / span 2; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:2 / 3; grid-row:1 / 2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:3 / 4; grid-row:1 / 2; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:2 / span 2; grid-row:2 / 3; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>

Automatisch generierte Felder #

Über die Eigenschaften grid-auto-columns und grid-auto-rows kann die Breite bzw. Höhe von Spalten bzw. Zeilen des Rasters angegeben werden, die automatisch generiert werden müssen, weil sie nicht explizit per CSS definiert wurden, wie im folgenden Beispiel für das <div style='background-color:green;'>. grid-auto-rows ist für dieses Raster auf 200px festgelegt. Daher wird die Zeile für das erwähnte <div> mit 200 px Höhe angezeigt.

Quelltext auswählen
1
2
3
4
5
6
7
      <div style='grid-auto-rows:200px; grid-template:100px 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-column:1 / 2; grid-row:1 / span 2; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:2 / 3; grid-row:1 / 2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:3 / 4; grid-row:1 / 2; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:2 / span 2; grid-row:2 / 3; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:green;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Über die Eigenschaft grid-auto-flow lässt sich die Methode festlegen, mit der Felder bei Bedarf automatisch generiert werden. Wird als Wert row angegeben (was auch der Vorgabewert ist), so werden für automatische Felder neue Zeilen im Raster angelegt (wie im vorigen Beispiel). Wird als Wert column angegeben, so werden neue Spalten angelegt. Dann sollte aber auch ein Wert für grid-auto-columns festgelegt werden, um die Breite dieser Spalten zu definieren.

Quelltext auswählen
1
2
3
4
5
6
7
      <div style='grid-auto-flow:column; grid-auto-columns:200px; grid-template:100px 75px / 200px 1fr 150px; padding:0 50px 20px; display:grid; grid-gap:5px 10px;'>
        <div class='t' style='grid-column:1 / 2; grid-row:1 / span 2; background-color:red;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:2 / 3; grid-row:1 / 2; background-color:orange;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:3 / 4; grid-row:1 / 2; background-color:yellow;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='grid-column:2 / span 2; grid-row:2 / 3; background-color:cyan;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
        <div class='t' style='background-color:green;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
      </div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Raster im Container ausrichten #

Mit den Eigenschaften justify-content und align-content kann die horizontale und vertikale Ausrichtung des Rasters in dem Elternelement, das als Container dient, festgelegt werden. Folgende Werte sind möglich:

start - Beginn des Containers
center - Mitte des Containers
end - Ende des Containers
stretch - Gesamter Container in der entsprechenden Achse
space-around - verfügbarer Raum wird so verteilt, dass der Abstand zwischen den Feldern doppelt so groß ist wie außerhalb
space-between - verfügbarer Raum wird nur zwischen den Feldern vergeteilt
space-evenly - verfügbarer Raum gleichmäßig zwischen und außerhalb der Felder verteilt

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
      <div style='justify-content:center; align-content:end; grid-template:50px 50px 50px / 120px 120px 120px; width:100%; height:250px; margin-bottom:20px; display:grid; grid-gap:5px 10px; border:1px dotted white;'>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
      </div>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.

Um den Wert stretch verwenden zu können, muss mindestens ein Maß in der entsprechenden Achse undefiniert sein (im Beispiel: 1fr).

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
      <div style='justify-content:stretch; align-content:space-around; grid-template:50px 50px 50px / 120px 1fr 120px; width:100%; height:250px; margin-bottom:20px; display:grid; grid-gap:5px 10px; border:1px dotted white;'>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
      </div>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
      <div style='justify-content:space-between; align-content:space-evenly; grid-template:50px 50px 50px / 120px 120px 120px; width:100%; height:250px; margin-bottom:20px; display:grid; grid-gap:5px 10px; border:1px dotted white;'>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
      </div>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.

Inhalte der Felder ausrichten #

Mit den Eigenschaften justify-items und align-items kann die horizontale und vertikale Ausrichtung der Felder des Rasters festgelegt werden. Folgende Werte sind möglich:

start - Beginn des Containers
center - Mitte des Containers
end - Ende des Containers
stretch - Gesamter Container in der entsprechenden Achse

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
      <div style='justify-items:center; align-items:start; justify-content:center; grid-template:50px 50px 50px / 120px 120px 120px; margin:auto; margin-bottom:20px; display:grid; grid-gap:5px 10px; border:1px dotted white;'>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
      </div>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
      <div style='justify-items:end; align-items:stretch; justify-content:center; grid-template:50px 50px 50px / 120px 120px 120px; margin:auto; margin-bottom:20px; display:grid; grid-gap:5px 10px; border:1px dotted white;'>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
      </div>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.

Mit den Eigenschaften justify-self und align-self kann die horizontale und vertikale Ausrichtung einzelner Felder des Rasters von der Vorgabe durch justify-items und align-items abweichend individuell festgelegt werden.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
      <div style='justify-items:stretch; align-items:stretch; justify-content:center; grid-template:50px 50px 50px / 120px 120px 120px; margin:auto; margin-bottom:20px; display:grid; grid-gap:5px 10px; border:1px dotted white;'>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange; justify-self:end; align-self:start;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
        <div class='t' style='background-color:yellow;'>Lorem ipsum.</div>
        <div class='t' style='background-color:orange;'>Lorem ipsum.</div>
      </div>
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.