Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[einsiedler]

Start mit GRID

Hallo liebe Forumer,

nach einer langen Abstinenz vom Forum habe ich nun erneut Fragen zu einem Projekt das ich mit Grid umsetzen möchte.

Ich möchte alles so einfach wie möglich halten, schlicht Fotos / Videos und einen Kurztext dazu, ähnlich einem Blog, öffentlich machen.

Mir ist klar das alles noch nicht perfekt ist, aber durch eure Mithilfe wäre ich zumindest näher daran.

Ich habe mal verschiedene Versionen von allem erstellt, da ich nicht sicher bin ob die Struktur (das Grid / Flexbox - Raster) jeweils so richtig ist.

Projekt A) - schlichter BLOG (ohne Menüführung)

Sub-Projekt B) - Version mit Menüführung

Ich möchte anmerken, ich verwende hier noch Blindtexte und diverse Vorschau / Ansichts Fotos und Videos.

===

Projekt A) - schlichter BLOG (ohne Menüführung)

LINK: Testseite_V8

1a) Grundsätzliches zum Grid - Raster:

Ist es erforderlich das angefangen vom obersten html über body, main bis zum verschachtelsten, untersten div, komplett alles mit display: grid; "durchgerastert" wird?

Oder kann ich einmal beispielsweise dem main ein grid mitgeben und weiterhin einer untergeordneten section ebenso ein display: grid; wie ich es einfach benötige?

Ist dies legitim?

Siehe bitte meine Beispielsseite.

2a) Frage zu inline-size

Breiten von nav id="skip-to-section" / header class="subheader" / details class="related-links" --- mit inline-size korrekt festlegen!

Bisher habe ich immer das Problem damit, auch wenn ich % - Angaben verwende, dann passiert es, das das jeweilige grid Raster dem ganzen Raster nach ausserhalb überspringt / überlagert. So gehört sich das aber nicht. Auch möchte ich diese Elemente zentrieren, das gelingt mir aus irgendeinem Grund auch nicht, auch nicht mit justify-items

Kann mir jemand zeigen wie es richtig geht?

3a) "to-the-top" Botton --- beim vertikalen auf- und abscrollen zum schnellen anklicken "nach oben"

Zum "to-the-top" Botton gibt es noch eine anders gelöste Version, momentan ist es hier so, das der "Sprung-Botton-Pfeil" jeweils innerhalb eines "section - Bereiches" " vertikal auf und ab" fährt.

Bei einer anderen Version ist dieser "Sprung-Botton-Pfeil" übergreifend aller sections, bleibt aber innerhalb des übergeordneten article. Hier habe ich das Raster dementsprechend geändert. Näheres später bei der "Version mit Menüführung" zum anschauen.

Villeicht verwirrend beschrieben, deshalb einfach mal angucken.

Hier nun meine Frage: Ob man es so löst oder ob es noch anders, allerdings ohne JS, "machbar" ist.

!!! Wichtig ist mir hier allerdings dabei. das bei einem verschmälerten Bildschirmfenster dieser Botton jeweils unter einer section steht, da immer ein "to-the-top" Botton beim vertikalen auf- und abscrollen zum schnellen anklicken verfügbar sein soll.

Ich hoffe es ist verständlich.

4a) Größe eines Videos

Die Bitrate meines Videos liegt bei mir bisher immer bei 1100 kbps bei einer maximalen Länge des Videos von 2 - 3 Min. Ist das zuviel und kann ich dies noch um einiges verringern. Ich frage, weil das Video ja noch "geladen" werden muss und deshalb "zu gross" ist und eine lange Ladezeit benötigt.

Sub-Projekt B) - Version mit Menüführung

Hier, um das oben beschriebene mit den "to-the-top" Botton deutlicher zu machen.

LINK : Testseite_V7b2

Link : Testseite_V7b1

Dann eine Version mit fixed Menüs :

LINK : Testseite_V7d.html

und LINK : Testseite_V7c.html

Das mit dem fixieren der Menüs hat nach meiner Ansicht mehr Nachteile, vorallem wenn man die Schrift vergrößert, weniger wenn man das Bildschirmfenster zusammenschiebt.

Wenn man natürlich die querie-Abstände so geschickt setzt würde es weniger auffallen. Was denkt ihr dazu?

Weitere Fragen zum zweiten Projekt muss ich grad noch formulieren.

An die lustigen Witzbolde unter euch mit irgendwelchen Spökskes, unterlasst es einfach hier etwas beizutragen. Danke.

Grüße T.