Problem mit css-grid

[Gunnar Bittersmann]

@@einsiedler

Darum ging es mir, wie man es halt "professionell" macht!

War dir mein Beispiel nicht professionell genug?

   <nav>
      <ul class="gridcontainer">

Wenn man es ernst meint mit separation of concerns (und es gibt gute Gründe, das zu tun), dann hat sowas wie „grid“ im Markup nichts zu suchen. HTML ist zur (semantischen) Auszeichnung der Inhalte da, nicht zur Angabe von deren Darstellung.

Im Markup sollte überhaupt nicht ersichtlich sein, wie Inhalte dargestellt werden (bspw. ob als Grid oder nebeneinander oder untereinander).

gridcontainer wäre eine rein darstellungsbezogene Klasse, also bäh!

Ohne eine solche:

   <nav>
      <ul>

nav > ul { display: grid }

(Sollte es mehrere nav-Elemente geben, müsste man das freilich noch spezifischer angeben, bspw. über eine ID für dieses nav-Element oder einen Selektor wie body > header > nav > ul.)

Hast Du ein Beispiel wie man diese Sandwich-Navigation macht wenn man das
Bildschirmfenster horizontal zusammenzieht?

Sandwich? Meinst du sowas?

LLAP 🖖