Positionierung mit Grid

Grid wurde entwickelt, um ein Raster-basiertes Layout einfach umsetzen zu können.

Auch hier wird ein Container-Element benötigt, welches dann die Elemente des Rasters enthält.

Grid definiert ein zweidimensionales Raster — Zeilen und Spalten gleichzeitig. Items können sich über mehrere Zellen erstrecken.

/* ── GRID CONTAINER ───────────────────────────── */
#grid1 {
    display: grid;
    grid-template-columns: auto auto auto auto;  /* 4 gleichbreite Spalten */
    grid-template-rows: auto auto auto;        /* 3 Zeilen */
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

#grid2 {
    display: grid;
    grid-template-columns: 25% 50% auto;        /* 3 Spalten mit festen/flexiblen Breiten */
    grid-template-rows: 25% auto;
}

/* ── GRID ITEMS: Zellen überspannen ───────────── */
#eins {
    grid-column-start: 1;
    grid-column-end: 3;   /* überspannt Spalten 1–2 */
    grid-row-start: 1;
    grid-row-end: 1;
}
#drei {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;      /* überspannt Zeilen 2–3 */
}

Grid-Template ohne vorgegebene Maße

Das umgebende Container-Div hat die Eigenschaft display: grid;.

Hier werden im Grid-Template keine expliziten Breiten und Höhen festgelegt, sondern lediglich
- die Anzahl der Spalten mit grid-template-columns: auto auto auto auto; auf 4
- die Anzahl der Reihen mit grid-template-rows: auto auto auto; auf 3
festgelegt.

Die so automatisch erzeugten Grid-Spalten und -Reihen haben dann ein sog. "Gap" über die Eigenschaften grid-column-gap: 10px; und grid-row-gap: 10px; zugewiesen, weshalb die inneren Divs einen leichten Abstand zueinander haben.

Die enthaltenen Divs 1, 2 und 3 werden dann anhand der Eigenschaften grid-column-start, grid-column-end sowie grid-row-start, grid-row-end explizit positioniert:

#1 erstes inneres Div
#2 zweites inneres Div
#3 drittes inneres Div

Grid-Template mit vorgegebenen Maßen

Hier werden im Gegensatz zum ersten Beispiel nur die Breiten der Spalten des Grids mit grid-template-columns: 25% 50% auto; und die Zeilen-Höhen des Grids mit grid-template-rows: 25% auto; explizit angegeben.

Die enthaltenen Divs wurden nicht extra positioniert, sonder füllen nach und nach das Grid auf und erhalten damit automatisch die passende Größe:

1. div
2. div
3. div
4. div
5. div
6. div

Anwendung & weitere Eigenschaften

Und zur Auflockerung wieder ein kleines Lernspiel, diesmal natürlich zum Thema Grid:
Grid Garden
Viel Spaß ;-)

Wer noch mehr Grid üben möchte, hier noch ein etwas fortgeschritteneres Spiel mit 3 unterschiedlichen Schwierigkeitsstufen:
Grid Attack