Hallo einsiedler, die Idee ist hier eigentlich, das Grid zunächst einmal für die schmale Ansicht zu definieren und für eine genügend breite Ansicht dann umzubauen ("mobile-first" Ansatz). Aber wenn deine ganze Seite auf dem entgegengesetzten Prinzip basiert, ist das vielleicht zu viel Arbeit. Letztlich brauchst Du zwei Grid-Template Definitionen, und bist auch auf einem guten Weg. Den minmax-Ansatz verstehe ich allerdings nicht, vor allem nicht mit dem Wert 0 für's Minimum. 6em ist für das Menü schon sehr schmal, möchtest Du das tatsächlich noch schmaler haben können? Ich würde ja "1fr 6em" für die Spalten verwenden. Ich würde die main-nav Marker nicht nur für die ~~Zeilen~~ Spalten, sondern auch für die Zeilen definieren. Damit hast Du den main-nav Bereich in beiden Dimensionen festgelegt und musst nur noch das Template umschalten. Das minmax lasse ich jetzt weg, weil ich den Sinn nicht kapiere... ~~~css .main-content-wrapper { display: grid; grid: "main-head main-head" auto [main-nav-start] "navigations navigations" auto [main-nav-end] "main-content main-content" 1fr "main-footer main-footer" auto / 1fr [main-nav-start] 6rem [main-nav-end]; } } /* Range-Syntax ist seit einem Jahr in allen Browsern */ @media (width < 30em) { .main-content-wrapper { grid: "main-head" auto "navigations" auto "main-nav" auto "main-content" 1fr "main-footer" auto / 1fr; } } #navigations { grid-area: navigations; ... } #main-nav { grid-area: main-nav; ... } ~~~ Wie gesagt: beim mobile-first Ansatz würde man das einspaltige Grid als "Normalwert" setzen und eine Medienabfrage auf `width >= 30em` setzen, um es zweispaltig umzubauen. _Rolf_ -- sumpsi - posui - obstruxi

Hallo einsiedler, die Idee ist hier eigentlich, das Grid zunächst einmal für die schmale Ansicht zu definieren und für eine genügend breite Ansicht dann umzubauen ("mobile-first" Ansatz). Aber wenn deine ganze Seite auf dem entgegengesetzten Prinzip basiert, ist das vielleicht zu viel Arbeit. Letztlich brauchst Du zwei Grid-Template Definitionen, und bist auch auf einem guten Weg. Den minmax-Ansatz verstehe ich allerdings nicht, vor allem nicht mit dem Wert 0 für's Minimum. 6em ist für das Menü schon sehr schmal, möchtest Du das tatsächlich noch schmaler haben können? Ich würde ja "1fr 6em" für die Spalten verwenden. Ich würde die main-nav Marker nicht nur für die Zeilen, sondern auch für die Zeilen defininieren. Damit hast Du den main-nav Bereich in beiden Dimensionen festgelegt und musst nur noch das Template umschalten. Das minmax lasse ich jetzt weg, weil ich den Sinn nicht kapiere... ~~~css .main-content-wrapper { display: grid; grid: "main-head main-head" auto [main-nav-start] "navigations navigations" auto [main-nav-end] "main-content main-content" 1fr "main-footer main-footer" auto / 1fr [main-nav-start] 6rem [main-nav-end]; } } /* Range-Syntax ist seit einem Jahr in allen Browsern */ @media (width < 30em) { .main-content-wrapper { grid: "main-head" auto "navigations" auto "main-nav" auto "main-content" 1fr "main-footer" auto / 1fr; } } #navigations { grid-area: navigations; ... } #main-nav { grid-area: main-nav; ... } ~~~ Wie gesagt: beim mobile-first Ansatz würde man das einspaltige Grid als "Normalwert" setzen und eine Medienabfrage auf `width >= 30em` setzen, um es zweispaltig umzubauen. _Rolf_ -- sumpsi - posui - obstruxi