Grid - Wie bewege die aside-Element

[Rolf B]

Hallo Joseba,

im Moment steuerst Du die Platzierung von main und aside#furtherInformation über namen in grid-template-area. Damit kann man keine Überlappung erreichen. Dafür muss man das etwas anders machen.

Dein Grid-Template besteht im Moment aus 4 Zeilen und 3 Spalten.

Zeile 1: Header
Zeile 2: Nav
Zeile 3: Main und Infobox
Zeile 4: Footer

Du steuerst die Anordnung der Elemente über grid-area und einen Namen. grid-area versteht aber noch mehr, nämlich Zeilen- und Spalten-Nummern. Diese Nummern zählen die Trennlinien zwischen den Grid-Bereichen. Bei Dir ist das:

     1        2                       3          4
 1   +-------------------------------------------+
     |  header                                   |
 2   +-------------------------------------------+
     |  nav                                      |
 3   A--------+-----------------------+----------+
     |  main  |   main                | aside    |
 4   +--------+-----------------------B----------+
     |  footer                                   |
 5   +-------------------------------------------+

Deine Zeilennummern gehen von 1-5 und die Spaltennummern von 1-4. Dein main-Element beginnt in Zeile 3 und Spalte 1 (Punkt A). Es endet in Zeile 4 und Spalte 3 (Punkt B). Das kann man genau so in der grid-area Eigenschaft hinschreiben:

main {
   grid-area: 3 / 1 / 4 / 3;
}

und es ist erlaubt, dass ein Feld im Grid von zwei Elementen belegt wird:

main {
   grid-area: 3 / 1 / 4 / 4;
}

Jetzt ist das main-Element 3 Spalten breit und das aside-Element liegt darüber. Man sieht das daran, dass ein Teil des Textes nicht mehr zu sehen ist.

Zum Nachlesen in einem Handbuch: Die CSS Eigenschaften grid-row-start, grid-row-end, gris-row, grid-column-start, grid-column-end und grid-column.

Aber ist das nun das, was Du haben willst?

Rolf