Hallo > eigentlich: Von klein nach groß vorarbeiten. > > > Du willst wohl eher sowas: > > > > ```css > > body { > > display: grid; > > grid-template-areas: > > "content-header content-header " > > "global-navigations global-navigations " > > "main global-nav " > > "main aside-banner " > > "footer footer "; > > ``` > > > > --- > > GUT, O.k., dann lass uns doch bitte über eine sinnvolle Grundstruktur diskutieren die ebenso sinnvoll bei kleinen Devices ist. > > Ich bereite da ein Entwurf vor zur Diskussion. Es spricht nichts dagegen, die Grid-Bereiche für unterschiedliche Breiten anders anzuordnen. ~~~ css /* * alles untereinander, vorwiegend für schmale Viewports * aber auch generell als Fallback für den seltenen Aufruf * mit einem Media-Query-unfähigen Uraltbrowser * (der allerdings mit großer Wahrscheinlichkeit * auch am Grid scheitern würde) */ body { display: grid; grid-template-areas: "content-header " "global-navigations " "global-nav " "main " "aside-banner " "footer "; } /* * Umbau der Anordnung bei breiteren Viewports, * im hiesigen Beispiel ab 40em aufwärts */ @media screen and (min-width: 40em) { body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main global-nav " "main aside-banner " "footer footer "; } } ~~~ Wegen der benamsten Bereiche ist der umbau von einem einspaltigen auf ein zwei- oder genereller mehrspaltiges Layout eins zwei fix ausprobiert. Tschö, Auge -- „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde

Hallo > eigentlich: Von klein nach groß vorarbeiten. > > > Du willst wohl eher sowas: > > > > ```css > > body { > > display: grid; > > grid-template-areas: > > "content-header content-header " > > "global-navigations global-navigations " > > "main global-nav " > > "main aside-banner " > > "footer footer "; > > ``` > > > > --- > > GUT, O.k., dann lass uns doch bitte über eine sinnvolle Grundstruktur diskutieren die ebenso sinnvoll bei kleinen Devices ist. > > Ich bereite da ein Entwurf vor zur Diskussion. Es spricht nichts dagegen, die Grid-Bereiche für unterschiedliche Breiten anders anzuordnen. ~~~ css /* * alles untereinander, vorwiegend für schmale Viewports * aber auch generell als Fallback für den seltenen Aufruf * mit einem Media-Query-unfähigen Uraltbrowser * (der allerdings mit großer Wahrscheinlichkeit * auch am Grid scheitern würde) */ body { display: grid; grid-template-areas: "content-header " "global-navigations " "global-nav " "main " "aside-banner " "footer "; } /* * Umbau der Anordnung bei breiteren Viewports, * im hiesigen Beispiel ab 40em aufwärts */ @media screen and (@min-width: 40em) { body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main global-nav " "main aside-banner " "footer footer "; } } ~~~ Wegen der benamsten Bereiche ist der umbau von einem einspaltigen auf ein zwei- oder genereller mehrspaltiges Layout eins zwei fix ausprobiert. Tschö, Auge -- „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde