css mit Adi Prinz

Grid Placement

Wenn Sie ein Grid für ein Element deklarieren und die untergeordneten Elemente (Child-Items) nicht positionieren, bestimmt der Algorithmus für die automatische Platzierung, was der Browser mit diesen nicht platzierten Grid-Elementen tun soll (Auto-Placement).

Wie sie in meinen Beispielen sehen können, werden sich alle Child-Items beim erstellen eines Grids, selbst in jeder Grid-Cell anordnen. Der Standardfluss besteht darin, Elemente nach Grid-Rows anzuordnen. Grid legt ein Element in jeder Grid-Cell von Row 1 an. Wenn Sie zusätzliche Rows mit der Eigenschaft grid-template-rows erstellt haben, platziert Grid weiterhin Elemente in diesen Rows. Wenn das Grid nicht genügend Rows im expliziten Grid hat, um alle Elemente zu platzieren, werden neue implizite Rows erstellt.

Auto-Placement

das folgende Beispiel besteht aus 9 Grid-Items. Die Positionierung wird mit grid-template-columns in 3 Spalten (Columns) aufgeteilt (Explicit). Rows werden Implizit erstellt.

  • grid-template-columns: repeat(3, 1fr ) -> Liefert 3 Columns gleicher Breite.

Beispiel-CSS

.wrapper6 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr );
}

Beispiel-HTML

<div id="wrapper" class="wrapper6"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7
8
9

Line-Based Placement

Das Verstehen von Grid-Lines ist Voraussetzung beim Arbeiten mit Line-Based Placement. Wissen, dass ein Grid mit 4 Columns immer 5 Columns-grid-Lines hat und ein Grid mit 5 Rows hat immer 6 Rows-Grid-Lines.

Placement mit grid-column-start/end und grid-row-start/end

Das folgende Beispiel besteht aus 7 Grid-Items. Die Positionierung der Items wird mit grid-column-start/end und grid-row-start/end im Grid positioniert.

  • grid-column-start: (Zahl) -> Column-grid-line Beginn.
  • grid-column-end: (Zahl) -> Column-grid-line Ende.
  • grid-row-start: (Zahl) -> Row-grid-line Beginn.
  • grid-row-end: (Zahl) -> Row-grid-line Ende.

Beispiel-CSS

.wrapper7 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto );
  grid-auto-rows: 80px;
}
.wrapper7 .item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.wrapper7 .item:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.wrapper7 .item:nth-child(3) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
.wrapper7 .item:nth-child(5) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}

Beispiel-HTML

<div id="wrapper" class="wrapper7"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7

Placement mit grid-column und grid-row (Shorthand)

Dasselbe Beispiel wie oben. Die Positionierung der Items wird mit grid-column und grid-row in der Kurzschreibweise geschrieben (Shorthand).

  • grid-column: Beginn/Ende -> Column-grid-line Beginn/Ende.
  • grid-row: Beginn/Ende -> Row-grid-line Beginn/Ende..

Beispiel-CSS

.wrapper7 .item:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}
.wrapper7 .item:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.wrapper7 .item:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2/ 3;
}
.wrapper7 .item:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

Placement mit grid-area (Shorthand)

Dasselbe Resultat wie oben gibt es noch kürzer mit grid-area. Die Reihenfolge lautet: row-start/column-start/row-end/column-end.

  • grid-area: row-start/column-start/row-end/column-end

Beispiel-CSS

.wrapper7 .item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 4;
}
.wrapper7 .item:nth-child(2) {
  grid-area: 3 / 1 / 4 / 2;
}
.wrapper7 .item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 3;
}
.wrapper7 .item:nth-child(5) {
  grid-area: 3 / 2 / 4 / 3;
}

Placement & Tracks

Um eine Grid Area zu erstellen, die größer ist als ein single grid track, geben sie eine end line an, die mehr als ein track entfernt ist. Bei single grid tracks reicht die Start-Grid-Line. 

grid-column: 1 / 3; Start- und End-Line
grid-row: 1 / 2; Start- und End-Line
grid-row: 1; Nur Start-Line

Placement mit grid-column und grid-row über Tracks

Das folgende Beispiel besteht aus 4 Grid-Items. Die Positionierung der Items wird mit grid-column und grid-row erstellt. Die End-Line wird nur bei Tracks, die größer als 1 sind, geschrieben.

Beispiel-CSS

.wrapper8 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, 100px);
  grid-auto-rows: 80px;
}
.wrapper8 .item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}
.wrapper8 .item:nth-child(2) {
  grid-column: 3 ;
  grid-row: 1 / 3;
}
.wrapper8 .item:nth-child(3) {
  grid-column: 1 ;
  grid-row: 2 ;
}
.wrapper8 .item:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

Beispiel-HTML

<div id="wrapper" class="wrapper8"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4

Placement über Tracks mit dem Keyword span

Dasselbe Beispiel noch einmal, diesmal verwende ich das Schlüsselwort span, anstatt das Grid-End mit der Nummer anzusprechen. Das Schlüsselwort span und eine Zahl danach gibt die Anzahl der Tracks an, mit dem die Grid-Area erweitert werden soll.

  • grid-column: 1 / span 2 -> Beginn bei grid-column-start 1 / erweitert um 2 Tracks

Beispiel-CSS

.wrapper9 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, 100px);
  grid-auto-rows: 80px;
}
.wrapper9 .item:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.wrapper9 .item:nth-child(2) {
  grid-column: 3 ;
  grid-row: 1 / span 2;
}
.wrapper9 .item:nth-child(3) {
  grid-column: 1 ;
  grid-row: 2 ;
}
.wrapper9 .item:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.wrapper9 .item:nth-child(5) {
  grid-column: 1 / span 3;
  grid-row: 3;
}

Beispiel-HTML

<div id="wrapper" class="wrapper9"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5

Benannte Grid-Lines & Areas

In den bisherigen Beispiel-Grids haben sie gelernt wie man Grid-Lines mit einem numerischen Wert (Zahl) ansprechen kann. Grid-Lines können auch benannt werden und an Stelle von Nummern verwendet werden. Benennen sie columns und rows mit benutzerdefinierte Namen in eckigen Klammern (Brackets). 

grid-template-columns: [col1] 100px  [col2] 100px  [col3] 100px [col4];
grid-template-rows: [row1] auto [row2] auto [row3] auto  [row4] auto [row5];

Benannte Grid-Areas können im Grid erstellt werden. Dazu weisen wir zunächst Items in unserem Markup mithilfe der Eigenschaft grid-area einen Bereich zu. Im grid-container kann dann grid-template-areas verwendet werden. Das Wiederholen des Namens eines Bereichs zeigt an, dass sich der Bereich über diesen Track erstreckt. Verwendung eines Punkts (.) oder eine Sequenz von mehreren Punkten (....) zeigt einen leeren Bereich an. 

grid-template-columns: 120px  120px  120px;
grid-template-areas:
    "header header header header"
    ".....  section1  aside ...."
    ".....  section2  aside ...."
    "footer footer footer footer";

Placement mit benannten Grid-Lines

Das folgende Beispiel besteht aus 7 Grid-Items. Die Positionierung der Items wird mit benannten Grid-Lines in 3 Spalten (Columns) und 4 Zeilen (Rows) aufgeteilt (Explicit).

Beispiel-CSS

.wrapper10 {
  grid-gap: 10px;
  grid-template-columns: [col1] 100px  [col2] 100px  [col3] 100px [col4];
  grid-template-rows: [row1] auto [row2] auto [row3] auto  [row4] auto [row5];
}
.wrapper10 .item:nth-child(1) {
  grid-column: col1 / col4;
  grid-row: row1;
}
.wrapper10 .item:nth-child(2) {
  grid-column: col1 / col2;
  grid-row: row2 / row5;
}
.wrapper10 .item:nth-child(7) {
  grid-column: col2 / col4;
  grid-row: row4 / row5;
}

Beispiel-HTML

<div id="wrapper" class="wrapper10"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7

Vier Columns mit grid-template-columns: repeat

Im folgenden Beispiel erstelle ich ein Grid mit vier gleich breiten Spalten (Columns) und 3 gleich hohe Zeilen (Rows) . Bevor ich die 1fr-Größe des column-track bestimme, definiere ich auch grid-lines-Namen [col-start] und [col-end]. Dasselbe mache ich mit row-track in der Höhe von 80px und row-lines-Namen [row-start] und [row-end]. Das bedeutet, dass am Ende Grid-Lines mit denselben Namen entstehen. Hier muss ich zusätzlich den Index anfügen.

Beispiel-CSS

.wrapper11 {
  grid-gap: 10px;
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(3, [row-start] 80px [row-end]);
}
.wrapper11 .item:nth-child(1) {
  grid-column: col-start 1 / col-end 4;
}
.wrapper11 .item:nth-child(5) {
  grid-column: col-start 4 / col-end 4;
  grid-row: row-start 2 / row-end 3;
}
.wrapper11 .item:nth-child(7) {
  grid-column: col-start 2 / col-end 3;
}

Beispiel-HTML

<div id="wrapper" class="wrapper11"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7

Benannte Grid-Cells mit grid-template-areas

Header
Sidebar
Content
Footer

Die grid-auto-flow-Eigenschaft

Die CSS-Eigenschaft grid-auto-flow steuert den Algorithmus, wie automatische Platzierung funktioniert, und gibt genau an wie Elemente in das Grid einfließen:
Folgende Eigenschaften stehen zur Verfügung.

  • grid-auto-flow: row -> Placement Row Standardwert
  • grid-auto-flow: column -> Placement Column
  • grid-auto-flow: dense -> Placement Items, um alle Löcher im Grid zu füllen
  • grid-auto-flow: row dense -> Placement Items, um alle Löcher im Row-Grid zu füllen
  • grid-auto-flow: column dense -> Placement Items, um alle Löcher im Column-Grid zu füllen

Die Eigenschaft grid-auto-flow: row

Das folgenden Beispiel zeigt ein Grid-Layout wie wir und das vorstellen. Die Eigenschaft grid-auto-flow: row ist der Standardwert und ändert eigentlich nichts am gewohnten Algorithmus

Beispiel-CSS

.wrapper13 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: row;
}

Beispiel-HTML

<div id="wrapper" class="wrapper13"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

Die Eigenschaft grid-auto-flow: column

Das folgenden Beispiel zeigt ein Grid-Layout mit grid-auto-flow: column. Zuerst werden Columns und dann Rows aufgefüllt. Rows müssen Explizit geschrieben werden.

Beispiel-CSS

.wrapper14 {
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 80px);
  grid-auto-flow: column;
}

Beispiel-HTML

<div id="wrapper" class="wrapper14"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

Die Eigenschaft grid-auto-flow: column mit impliziten Columns

Das folgenden Beispiel zeigt ein Grid-Layout mit grid-auto-flow: column. Zuerst werden Columns und dann Rows aufgefüllt. Columns werdenmit grid-auto-columns implizit geschrieben.

Beispiel-CSS

.wrapper15 {
  grid-gap: 10px;
  grid-auto-columns: 100px;
  grid-template-rows: repeat(3, 80px);
  grid-auto-flow: column;
}

Beispiel-HTML

<div id="wrapper" class="wrapper15"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7
8

Die Eigenschaft grid-auto-flow: row mit explizit definiertem Item.

Das folgenden Beispiel zeigt ein Grid-Layout mit grid-auto-flow: row. Hier kommt das Grid ein wenig an seine Grenzen.

Beispiel-CSS

.wrapper16 {
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: row;
}
.wrapper16 .item:nth-child(3) {
  grid-column: span 3;
  grid-row: span 3;
}

Beispiel-HTML

<div id="wrapper" class="wrapper16"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

Die Eigenschaft grid-auto-flow: row dense.

Das folgenden Beispiel zeigt ein Grid-Layout mit grid-auto-flow: row dense. Damit wird versucht, Löcher in einer Zeile (Row) mit vorhandenen Items aufzufüllen.

Beispiel-CSS

.wrapper17 {
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: row dense;
}
.wrapper17 .item:nth-child(3) {
  grid-column: span 3;
  grid-row: span 3;
}

Beispiel-HTML

<div id="wrapper" class="wrapper17"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

Die Eigenschaft grid-auto-flow: column dense.

Das folgenden Beispiel zeigt ein Grid-Layout mit grid-auto-flow: column dense. Damit wird versucht, Löcher in einer Spalte (Column) mit vorhandenen Items aufzufüllen.

Beispiel-CSS

.wrapper18 {
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column dense;
}
.wrapper18 .item:nth-child(3) {
  grid-column: span 3;
  grid-row: span 3;
}

Beispiel-HTML

<div id="wrapper" class="wrapper18"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

Die Eigenschaft grid-auto-flow: dense.

Das folgenden Beispiel zeigt ein Grid-Layout mit grid-auto-flow: dense. Damit wird versucht, sowohl Löcher in einer Zeile (Row) und einer Spalte (Column) mit vorhandenen Items aufzufüllen. Die Reihenfolge lautet: zuerst row dense, dann column dense.

Beispiel-CSS

.wrapper19 {
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: dense;
}
.wrapper19 .item:nth-child(3) {
  grid-column: span 3;
  grid-row: span 3;
}

Beispiel-HTML

<div id="wrapper" class="wrapper19"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6