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

[einsiedler]

Folgendes möchte ich erreichen:

(Es geht mir hier um das hell-orange unterlegte GRID-Element)

Bei einem sehr schmalem Browserfenster , sagen wir bei < 30em, soll dieses Grid-Element (in der Höhe) zweispaltig werden und die Elemente darin untereinander angeordnet werden. Das möchte ich erreichen.

.main-content-wrapper {
	display: grid;
	grid: 	"main-head main-head" auto
			"navigations navigations" auto
			"main-content main-content" 1fr
			"main-footer main-footer" auto
		  / minmax(0, auto) [main-nav-start] minmax(0, 6rem) [main-nav-end];
	}


#navigations {
	grid-area: navigations;	
	grid-column-end: main-nav;
        background-color: rgba(255, 215, 0, 0.3);
}


#main-nav {
    grid-area: navigations / main-nav;
    min-width: 0;
}

Die dort enthaltenden Elmente, also einmal die "Hauptnavigation" als auch (zum zweiten) die "Interne Seiten Navigation" möchte ich dann untereinander angeordnet dargestellt haben (wohlgemerkt bei weniger als 30em!) und das in der Reihenfolge: "Hauptnavigation" darunter die "Interne Seiten Navigation".

Wäre das möglich wie ich mir das vorstelle?

Kann mir bitte jemand dabei helfen?

Der einsiedelnde

[MrMurphy]

Kann mir bitte jemand dabei helfen?

Grundsätzlich ja, konkret nein, da die CSS-Brocken, die du uns hinwirfst, nicht wirklich weiterhelfen.

Da der Umbruch bei einer bestimmten Fensterbreite erfolgen soll könntest du dich mit den "Media Queries" beschäftigen. Die sind genau für solche Lösungen gedacht.

[Matthias Scharwies]

Guten Morgen!

Bei einem sehr schmalem Browserfenster , sagen wir bei < 30em, soll dieses Grid-Element (in der Höhe) zweispaltig werden und die Elemente darin untereinander angeordnet werden.

Du meinst zweizeilig?

Kann mir bitte jemand dabei helfen?

Grundsätzlich ja, konkret nein, da die CSS-Brocken, die du uns hinwirfst, nicht wirklich weiterhelfen.

Da der Umbruch bei einer bestimmten Fensterbreite erfolgen soll könntest du dich mit den "Media Queries" beschäftigen. Die sind genau für solche Lösungen gedacht.

Du kennst bestimmt schon das Grid-Tutorial im Wiki.

Bereits im Einführungs-Kapitel gibt es dieses Beispiel:

• CSS/Tutorials/Grid/Einführung#Zweispaltiges Layout

Du musst ja nicht jedem Grid Namen geben. Manchmal reicht ein Zweizeiler (Pun intended).

Herzliche Grüße

Matthias Scharwies

[einsiedler]

Lieber MrMurphy, das Prinzip der media-queries ist mir längst (seid einigen Jahren) bekannt. : O )) Bitte schreib mich mal an, Du könntest mir, gegen Bezahlung, villeicht helfen bei einem Hosterumzug. Interesse? info (punkt) awg (ät) gmx (punkt) net

[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

[MudGuard]

Hi,

Ich würde die main-nav Marker nicht nur für die Zeilen, sondern auch für die Zeilen defininieren.

Wäre das dann nicht doppelt? 😉

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

Oh.
Ja.
Ich habe ein ni entfernt. Defininieren - ts… dabei kann man sich ja glatt die Zunge zeilen. Oder spalten? 😉

Rolf

[MudGuard]

Hi,

Oh.
Ja.
Ich habe ein ni entfernt. Defininieren - ts… dabei kann man sich ja glatt die Zunge zeilen. Oder spalten? 😉

das hatte ich gar nicht gesehen, ich bezog mich eigentlich auf die Zeilen.

cu,
Andreas a/k/a MudGuard

[einsiedler]

Tja, eigentlich ist es simpel. Hätte auch darauf kommen können, aber ich denke wohl oft viel zu kompliziert.

Hast ja Recht.

Noch eben zum minmax-Ansatz mit dem Wert 0 für's Minimum:

Das ist leider nötig, da sonst bei einem bestimmten schmalen Browserfenster der .main-content-wrapper seitlich rechts über das body hinübertritt. Das bemerkte ich als ich das body mal andersfarbig eintönte. Dann war dieses Phänomen sichtbar, deutlich, und halt mit minmax(0, auto) tritt das dann nicht mehr auf. Sicherlich hätte ich dem .main-content-wrapper auch ein min-width:0; mitgeben können aber DAS funktioniert irgendwie nicht. Da hatte ich keine Lust mehr zu fummeln. Ob jetzt body jetzt auch ein min-width:0; braucht.

der einsiedelnde

[MrMurphy]

Für dein Problem sehe ich am sinnvollsten eine Lösung mit Flexbox (display: flex; )

Ich gehe davon aus, das .navigations ein Container (div, nav, article, ...) über die gesamte Spaltenbreite ist. Innerhalb von .navigations befinden sich wiederum zwei Container, die die Hauptnavigation und die Interne Navigation enthalten.

Dafür habe ich mal eine einfache Lösung erstellt. Die p-Elemente kannst du einfach durch die von dir gewählten Container ersetzen.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /* .navigations */
   @media all {
      .navigations {
         background-color: gold;
      }
   }
   @media only screen and (min-width: 40em) {
      .navigations {
         display: flex;
      }
      .navigations :nth-child(1) {
         margin-right: auto;
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Layout</h1>
   </header>
   <nav class="navigations">
      <p>Hauptnavigation</p>
      <p>Interne Navigation</p>
   </nav>
   <footer>
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2024/aug/02/grid-element-bei-als-30em-in-zwei-spalten-aufteilen/1816349#m1816349">https://forum.selfhtml.org/</a></p>
   </footer>
</body>
</html>

[MrMurphy]

An dem Computer kann ich meine Antwort grade nicht korrigieren.

Statt

Die p-Elemente kannst du einfach durch die von dir gewählten Container ersetzen.

wollte ich schreiben:

Das nav-Element und die p-Elemente kannst du einfach durch die von dir gewählten Container ersetzen.