Hallo Einsiedler,
schön, dass Du jetzt den offenen Weg gehst 😀
Da hast Du uns ja einen ganzen Katalog vorgelegt. Es kann passieren, dass davon Punkte nicht angesprochen werden. Frage dann einfach nochmal nach. Und zumindest ich verstehe auch nicht alles, was Du meinst, glaube ich.
Grid hat Matthias schon angesprochen. Du legst das Layoutmodul, das der Browser verwenden soll, für jedes HTML Element einzeln fest, und zwar das Modul, was für den jeweiligen Zweck das Richtige ist. Das Standardmodul ist Flow-Layout (was Du mit display:inline oder display:block bekommst).
Grid für das <html> Element ist übrigens wenig sinnvoll. Dieses Element hat nur ein sichtbares Kindelement, den Body.
Einen Flexbox-Fallback brauchst Du nicht. Vor ein paar Jahren hätte man das für den IE überlegen können, aber der ist offiziell tot. Also: Grid für jeden. Eine Doppelentwicklung mit Flexbox als Default und Grid als Enhancement wäre auch schwierig. Was Grid mit recht klarem HTML hinbekommt, verlangt bei Flexbox nach zusätzlichen divs. Und die stören das Grid dann auch noch. Lass das. Meine ich.
Dein Thema mit inline-size verstehe ich nicht. Welches Element hat deiner Ansicht nach derzeit die falsche Breite? Was wäre richtig? Und was soll zentriert sein, ist es aber nicht? Wenn Dir irgendwas schief geht und Du nicht weißt, woran es liegt, dann bau es doch einfach in eine Testseite ein und lass uns gucken.
Deine 7d Testseite hab ich nur kurz angeschaut. Die Layoutidee "Vertikale Überschriften" fehlt, ok. Beim Dropdown-Menü hab ich eine Weile gebraucht, bis ich verstanden habe, dass das Submenüs sind. War vermutlich eigene Doofkeit. Aber ich finde die Buttons (nicht: Bottons!!!) im Vergleich zum Menütext zu aufdringlich, da würdest Du sicherlich noch am Aussehen feilen wollen. Und was ist da fixed, außer dem "to top" Link?
Einen Spökes muss ich machen: Verwende keine Pixel für Mediaqueries. Verwende em, die orientieren sich an der Basisschriftgröße der Seite. Wenn jemand den Text zoomt, passt em sich an, px aber nicht.
Eine Idee für ein Seitenlayout wäre ggf. auch ein Grid im Body zu erzeugen, den Body auf 100vh Höhe zu setzen und dann Header und Navigation in die erste Row des Grids zu legen. Das main-Element kommt in die zweite Row und bekommt overflow-y:scroll. Dann scrollt nicht mehr der Body, sondern nur noch der main-Teil. Beim Inhalt der Navigation musst Du dann einen position:absolute-Container verwenden, damit sich beim Aufklappen nicht der ganze Main-Bereich verschiebt. Es sei denn, du willst das so… Ein solches Grid könnte rechts auch eine Spalte haben, in dem der "to top" Link herumschwebt.
Rolf
sumpsi - posui - obstruxi