css mit Adi Prinz

Grid Placement

Mit Grid Placement legen Sie fest, an welcher Position ein Grid-Item innerhalb des Grid Containers erscheint. Wird keine Position angegeben, übernimmt der Browser die Platzierung automatisch. Dieser Vorgang heißt Auto Placement.

Standardmäßig werden Grid-Items zeilenweise angeordnet. Reichen die definierten Rows oder Columns des Explicit Grid nicht aus, erzeugt CSS Grid zusätzliche Tracks im Implicit Grid.

Auto Placement

Das Beispiel enthält neun Grid-Items. Mit grid-template-columns werden drei gleich breite Columns im Explicit Grid erstellt. Die benötigten Rows entstehen automatisch.

  • grid-template-columns: repeat(3, 1fr); erzeugt drei Columns gleicher Breite.

Beispiel-CSS

.wrapper6 {
  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

Beim Line-Based Placement werden Grid-Items über Grid-Lines positioniert. Ein Grid mit vier Columns besitzt fünf Column-Lines. Ein Grid mit fünf Rows besitzt sechs Row-Lines.

Merke: Die Anzahl der Grid-Lines ist immer um eins größer als die Anzahl der Tracks.

Longhand-Eigenschaften

Mit den Longhand-Eigenschaften lassen sich Start- und Endlinie eines Grid-Items einzeln festlegen.

Eigenschaft Aufgabe Beispiel Initialwert
grid-column-start Bestimmt die erste Column-Line. grid-column-start: 1; auto
grid-column-end Bestimmt die letzte Column-Line. grid-column-end: 4; auto
grid-row-start Bestimmt die erste Row-Line. grid-row-start: 1; auto
grid-row-end Bestimmt die letzte Row-Line. grid-row-end: 2; auto

Beispiel-CSS

.wrapper7 {
  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

grid-column und grid-row

Die Shorthand-Eigenschaften fassen Start- und Endlinie in jeweils einer Deklaration zusammen. Die Werte werden mit einem Schrägstrich getrennt.

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

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;
}

Negative Grid-Lines

Negative Liniennummern zählen vom Ende des Explicit Grid zurück. -1 bezeichnet die letzte, -2 die vorletzte und -3 die drittletzte Grid-Line. 

grid-column: 1 / -1; /* über die gesamte Breite */
grid-column: 1 / -2; /* endet eine Column früher */

Merke: Negative Grid-Lines beziehen sich auf die Linien des Explicit Grid. grid-column: 1 / -1; ist deshalb eine praktische Schreibweise für ein Element über die gesamte Grid-Breite.

grid-area als Shorthand

grid-area kann alle vier Linien einer Grid-Area in einer einzigen Deklaration festlegen. 

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;
}

Merke: Bei der numerischen Schreibweise lautet die Reihenfolge immer: Row-Start, Column-Start, Row-End, Column-End.

Placement & Tracks

Ein Grid-Item belegt standardmäßig einen einzelnen Track. Soll es mehrere Columns oder Rows überspannen, werden Start- und Endlinie angegeben. 

grid-column: 1 / 3; /* zwei Column-Tracks */
grid-row: 1 / 2;    /* ein Row-Track */
grid-row: 1;        /* nur Startlinie, ein Track */

Placement über Start- und Endlinien

Das Beispiel enthält vier Grid-Items. Nur bei Elementen über mehrere Tracks wird zusätzlich eine Endlinie benötigt.

Beispiel-CSS

.wrapper8 {
  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 mit span

Das Keyword span gibt an, über wie viele Tracks sich ein Grid-Item ab seiner Startlinie erstrecken soll.

  • grid-column: 1 / span 2; beginnt an Column-Line 1 und umfasst zwei Column-Tracks.

Beispiel-CSS

.wrapper9 {
  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

Merke: span bezeichnet die Anzahl der Tracks und nicht die Nummer der Endlinie.

Named Grid Lines & Areas

Grid-Lines können nicht nur über Zahlen, sondern auch über eigene Namen angesprochen werden. Bei größeren Layouts erhöht das die Lesbarkeit des CSS-Codes.

Named Grid Lines

Die Namen werden innerhalb von grid-template-columns oder grid-template-rows in eckigen Klammern eingetragen. 

grid-template-columns:
  [col1] 100px
  [col2] 100px
  [col3] 100px
  [col4];

grid-template-rows:
  [row1] auto
  [row2] auto
  [row3] auto
  [row4] auto
  [row5];

Beispiel-CSS

.wrapper10 {
  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

Wiederholte Line-Namen mit repeat()

Innerhalb von repeat() können Line-Namen wiederholt werden. Entstehen mehrere Lines mit demselben Namen, werden sie zusätzlich über einen Index angesprochen.

Beispiel-CSS

.wrapper11 {
  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

Named Grid Areas mit grid-template-areas

Mit grid-template-areas lässt sich ein Layout über benannte Bereiche beschreiben. Jedes Grid-Item erhält dazu über grid-area einen Namen.

Wiederholte Namen bilden eine zusammenhängende Grid-Area. Ein Punkt (.) kennzeichnet eine nicht belegte Grid-Cell.

Beispiel-CSS

.wrapper12 {
  gap: 10px;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto minmax(200px, auto) auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

.wrapper12 .header {
  grid-area: header;
}

.wrapper12 .sidebar {
  grid-area: sidebar;
}

.wrapper12 .content {
  grid-area: content;
}

.wrapper12 .footer {
  grid-area: footer;
}

Beispiel-HTML

<div id="wrapper" class="wrapper12">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item content">Content</div>
  <div class="item footer">Footer</div>
</div>

Beispiel-Ausgabe

Header
Sidebar
Content
Footer

Merke: Eine Named Grid Area muss rechteckig sein. Unterbrochene oder L-förmige Bereiche sind nicht gültig.

Die Eigenschaft grid-auto-flow

grid-auto-flow steuert den Algorithmus des Auto Placement. Die Eigenschaft legt fest, in welcher Richtung nicht positionierte Grid-Items eingefügt werden und ob entstandene Lücken nachträglich gefüllt werden dürfen.

Wert Bedeutung Initialwert
row Füllt das Grid zeilenweise. Das ist der Standardwert. row
column Füllt das Grid spaltenweise. –
dense Aktiviert den Dense-Packing-Algorithmus und versucht, kleinere Items in frühere Lücken einzusetzen. –
row dense Zeilenweiser Ablauf mit Dense Packing. –
column dense Spaltenweiser Ablauf mit Dense Packing. –

Hinweis: dense kann die visuelle Reihenfolge verändern. Die Reihenfolge im HTML bleibt jedoch unverändert.

grid-auto-flow: row

Der Standardwert row platziert Grid-Items zeilenweise von links nach rechts und anschließend in der nächsten Row.

Beispiel-CSS

.wrapper13 {
  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

grid-auto-flow: column

Mit column werden zuerst die vorhandenen Rows einer Column gefüllt. Danach beginnt die nächste Column.

Beispiel-CSS

.wrapper14 {
  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

column mit Implicit Columns

In diesem Beispiel sind nur die Rows ausdrücklich definiert. Zusätzliche Columns entstehen im Implicit Grid und erhalten ihre Breite über grid-auto-columns.

Beispiel-CSS

.wrapper15 {
  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

row mit einem großen Grid-Item

Das dritte Grid-Item belegt drei Columns und drei Rows. Beim normalen Auto Placement bleiben dadurch möglicherweise freie Grid-Cells bestehen.

Beispiel-CSS

.wrapper16 {
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 80px);
  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

grid-auto-flow: row dense

row dense behält den zeilenweisen Ablauf bei, versucht aber, kleinere Grid-Items nachträglich in freie Grid-Cells einzusetzen.

Beispiel-CSS

.wrapper17 {
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 80px);
  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

grid-auto-flow: column dense

column dense verwendet einen spaltenweisen Ablauf und versucht ebenfalls, vorhandene Lücken mit kleineren Items zu schließen.

Beispiel-CSS

.wrapper18 {
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 80px);
  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

grid-auto-flow: dense

Wird nur dense angegeben, bleibt die Standardrichtung row erhalten. Die Schreibweise entspricht daher row dense.

Beispiel-CSS

.wrapper19 {
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 80px);
  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

Wichtig: dense bedeutet nicht, dass zuerst Rows und danach Columns gefüllt werden. Ohne Angabe von column gilt weiterhin die Richtung row.