GRID - Element bei < als 30em in zwei Spalten aufteilen

[Rolf B]

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...

.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