Grid - Wie bewege die aside-Element

[Rolf B]

Hallo Joseba,

sorry, das hätte ich gleich sehen können.

grid-template ist eine Eigenschaft, die die Eigenschaftgen grid-template-rows, grid-template-columns und grid-template-areas zusammenfasst.

Das bedeutet: Wenn Du zuerst grid-template-columns aufschreibst und danach grid-template, wird grid-template-columns überschrieben.

Drei Möglichkeiten gibt es:

1. Ändere grid-template in grid-template-areas, dann musst Du aber auch die Definition der Zeilenhöhe in eine grid-template-rows Eigenschaft verschieben. Würde ich nicht empfehlen.
2. Ändere die Reihenfolge: erst grid-template, dann grid-template-columns. Würde ich auch nicht empfehlen
3. Verwende alle Möglichkeiten von grid-template und definiere die Spalten in dieser Eigenschaft:

   grid-template-columns: 8% 74% 18%;
   grid-template:
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 10em
        "main main gap2" 3em
        "main main info" 1fr
        "footer footer footer" auto;

   grid-template:
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 10em
        "main main gap2" 3em
        "main main info" 1fr
        "footer footer footer" auto / 8% 74% 18%;

Rolf