Hallo einsiedler,

 grid: "main-head navigations" 1fr 16em
       "main main content" auto / 1fr 60%;

so geht's nicht - bzw. ich weiß gar nicht, was der Browser sich daraus dann zurechtbastelt.

Die grid-Eigenschaft fasst grid-template-areas, grid-template-rows und grid-template-columns zusammen (und noch ein paar mehr, die ignorieren wir jetzt mal).

Für grid-template-areas ist es wichtig, dass die benannten Bereiche ein sauberes Rechteck bilden. D.h. in den Strings müssen für jede Zeile gleich viele Namen stehen (oder ein Punkt für unbenannte Bereiche). Bei Dir stehen aber in der ersten Zeile 2 Namen und in der dritten Zeile 3 Namen.

Wenn Du ein Konstrukt dieser Art hast (foo, bar, baz und hurz sind die Area-Namen):

   +---------------+-----------------+------------------+
   |  foo                            |  bar             |
   |                                 |                  |
   +---------------+-----------------+------------------+
   |  baz          |  hurz                              |
   |               |                                    |
   +---------------+-----------------+------------------+

dann hat dein Grid de facto 3 Spalten und die Bereiche foo und hurz überdecken jeweils zwei Spalten. Für die grid-Areas beschreibst Du das so:

   grid-template-areas: "foo foo  bar"
                        "baz hurz hurz";

Die Namen müssen nicht übereinander stehen, das hilft nur bei der Lesbarkeit.

Der Übergang von der Eigenschaft grid-template-areas zur Sammeleigenschaft grid geht nun so, dass Du hinter jeden String, der eine Zeile beschreibt, die gewünschte Zeilenhöhe setzt. Und hinter all das machst Du einen Schrägstrich und legst die Spaltenbreiten fest. Es hilft, den Schrägstrich und die Spaltenbreiten auf eine eigene Zeile zu setzen, dann kann man das wunderbar unter den Spaltenbezeichnungen verteilen:

   grid-template-areas: "foo  foo  bar"  1em
                        "baz  hurz hurz" 1fr
                       / 10em 1fr  20%;

Hat es das klarer gemacht?

Rolf