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: ```css .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: ~~~ css 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: ~~~ css 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.

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: ~~~ HTML 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: ~~~ HTML 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.

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: ~~~ HTML 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**. Geht das auch? In etwas mit: ~~~ HTML 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.

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: ~~~ HTML 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 beim zweiten content die Navigation überlagernd abbilden und im zweiten ROW beim letzten content den **"To-Top"-Button**. Geht das auch? In etwas mit: ~~~ HTML 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.

Okay, noch eine Frage: Wenn ich nun ein Grid-Bereich überlagernd möchte (wie in meinem Beispiel "*Testseite_V7d.html*") 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: ~~~ HTML 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 beim zweiten content den "To-Top" Button überlagernd abbilden. Geht das auch? In etwas mit: ~~~ HTML body > .contentbox { grid-area: content; } body > .contentbox { grid-area: content; grid-row: 1 / 1; grid-column: 3 / col-4-start; } ~~~ T.