Grid Items

Grid-Items können präzise im Grid platziert werden. Dafür gibt es mehrere Eigenschaften.

grid-column

Mit grid-column bestimmt man, über wie viele Spalten sich ein Element erstreckt und wo es beginnt.

Kurzschreibweise

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

.box1 {
  grid-column: 1 / 3; /* Von Linie 1 bis Linie 3 */
}

Box 1 erstreckt sich jetzt über die ersten beiden Spalten.

1
2
3
4
5
6

Span-Notation

Man kann auch angeben, über wie viele Spalten sich ein Element erstrecken soll:

.box3 {
  grid-column: span 2; /* Erstreckt sich über 2 Spalten */
}
1
2
3
4
5
6

grid-column-start

Mit grid-column-start legt man fest, bei welcher vertikalen Grid-Linie ein Element beginnt.

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

.box1 {
  grid-column-start: 2;
}

Box 1 beginnt jetzt bei der zweiten Spalte statt bei der ersten.

1
2
3
4
5
6

grid-column-end

Mit grid-column-end bestimmt man, bei welcher vertikalen Grid-Linie ein Element endet.

.box1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

Box 1 erstreckt sich von Linie 2 bis Linie 4.

1
2
3
4
5
6

Negative Werte

Man kann auch vom Ende des Grids zählen:

.box1 {
  grid-column-start: 1;
  grid-column-end: -1;
}

-1 ist immer die letzte Linie, -2 die vorletzte, usw.

1
2
3
4
5
6

grid-row

Mit grid-row bestimmt man, über wie viele Zeilen sich ein Element erstreckt.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.box1 {
  grid-row: 1 / 3; /* Von Zeile 1 bis Zeile 3 */
}

Box 1 erstreckt sich über die ersten beiden Zeilen.

1
2
3
4
5
6

Span-Notation

.box2 {
  grid-row: span 2; /* Erstreckt sich über 2 Zeilen */
}
1
2
3
4
5
6

grid-row-start

Mit grid-row-start legt man fest, bei welcher horizontalen Grid-Linie ein Element beginnt.

.box3 {
  grid-row-start: 2;
}

Box 3 beginnt in der zweiten Zeile.

1
2
3
4
5
6

grid-row-end

Mit grid-row-end bestimmt man, bei welcher horizontalen Grid-Linie ein Element endet.

.box3 {
  grid-row-start: 2;
  grid-row-end: 4;
}

Box 3 erstreckt sich von Zeile 2 bis Zeile 4.

1
2
3
4
5
6

Kombination von column und row

Man kann Spalten und Zeilen kombinieren, um Elemente präzise zu platzieren:

.box1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

Box 1 nimmt jetzt einen Bereich von 2x2 Zellen ein.

1
2
3
4
5
6