Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[einsiedler]

Okay, noch eine Frage: Wenn ich nun ein Grid-Bereich überlagern möchte (wie in meinem Beispiel "Testseite_V7d.html") das Main-Menue und den "To-Top" Button:

Ähnlich wie hier NUR mit in der (anderen) Schreibweise:

  .main-content {
		  display: grid;

			grid-template-rows:    [row-1-start] autofit [row-2-start] autofit [row-3-start] autofit [row-4-end];
			grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-4-start] 1fr [col-5-start] 14rem [col-5-end];
			
			gap: 0;		
		}
		
	.main-head {
			grid-row: 1 / 2;
			grid-column: 1 / col-5-end;
		}
	.articlebox {
			grid-row: 2 / 3;
			grid-column: 1 / col-5-end;
		}
	.footerbox {
			grid-row: 3 / 4;
			grid-column: 1 / col-5-end;
		}
	#navigations {
			grid-row: 2 / 3;
			grid-column: 5 / col-5-end;
			z-index: 10;
		}

Geht dies auch mit dieser Schreibweise:

body {
 display: grid;

 grid: "main-head content content" 1fr auto auto
          "main-head content content" auto / 1fr auto auto;

Nun möchte ich in der ersten Zeile (ROW) beim zweiten content die Navigation überlagernd abbilden und im zweiten ROW beim letzten content den "To-Top"-Button.

Jetzt mal zur Übung.

Geht das auch?

In etwas mit:

body >  .contentbox {
  grid-area: content;
  }

body .contentbox > #navigations {
  grid-area: content;
  grid-row: 1 / 1;
  grid-column: 3 / col-4-start;
	}

body .contentbox > #skiptop {
  grid-area: content;
  grid-row: 2 / 2;
  grid-column: 3 / col-4-start;
	}

T.