Grid - Wie bewege die aside-Element

[Rolf B]

Hallo Joseba,

das hast Du falsch verstanden.

Die grid-template Eigenschaft fasst grid-template-areas, grid-template-rows und grid-template-columns zusammen.

Hier mal einzeln und mit kleinem Grid:

   grid-template-areas: "header header"
                        "nav    nav"
                        "main   werb"
                        "main   info"
                        "footer footer";
   grid-template-rows: auto auto 10em 1fr auto;
   grid-template-columns: 1fr 30em;

In grid-template-areas stehen 5 Strings mit Namen, jeder String für eine Zeile im Grid. Und jeder String besteht aus zwei Namen, jeder für eine Spalte im Grid.

Ich zeige dir mal, wie sich grid-template aus Bausteinen zusammensetzt. Namen für Bausteine setze ich in [Klammern]:

grid-template: [zeilen] / [spalten];

[zeilen] = [zeile] [zeile] [zeile] ...
[zeile] = "[name] [name] [name]..." [höhe]
[spalten] = [breite] [breite] ...

Also: Ein grid-template besteht aus einem Zeilenteil, einem Schrägstrich und einem Spaltenteil.

Der Zeilenteil besteht aus Zeilen.

Eine Zeile ist ein String aus Namen und eine Höhe

Der Spaltenteil besteht aus Spaltenbreiten. Ich hätte in meinem Beispiel die Spaltenangaben besser in eine eigene Zeile geschrieben, damit es mehr wie eine Tabelle aussieht. Und ich füge mal ein paar Leerstellen ein, dann sieht man besser, wie alles zusammengehört:

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

Man muss das nicht so ordentlich hinschreiben. CSS versteht es auch, wenn alles hintereinander steht:

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

Aber du und ich, wir verstehen es dann nicht mehr.

Rolf