Nachdem mir bei meinem Problem mit dem mobilen Menü sehr geholfen wurde, habe ich jetzt begonnen, meine Website auf ein grid layout umzustellen.
Dazu habe ich vorerst mal drei Spalten mit linker Sidebar, Hauptteil und rechter Sidebar. Der Hauptteil ist wiederum ein Grid mit 4 Zeilen. Ist das nachteilig, das so zu handhaben, also ein grid innerhalb eines grids? Ich habe dabei gedacht, dass ich für eine mobile Version beispielsweise einfach mal die Sidebars weggebe und das innere Grid so bestehen bleibt.
Nun aber zu meinem eigentlichen Problem. Meinem Verständnis nach sollte folgende Zeile den verfügbaren Platz (=gesamte Bildschirmbreite) so unterteilen, dass ich links und rechts eine Spalte mit 1,5rem habe und in der Mitte eine Spalte mit dem restlichen Platz.
grid-template-columns: 1.5rem 1fr 1.5rem;
Das Problem ist allerdings, dass ein Bild oder eine Tabelle, die eben größer ist und in der mittleren Spalte untergebracht ist, diese auch einfach größer macht und alles andere nach rechts aus dem Bildschirm heraus schiebt.
Hier wäre das Beispiel mit dem Bild und
hier die Tabelle (bitte den Browser ganz schmal machen und dann neu laden).
Leider habe ich dazu nichts im Internet finden können. Und auch andere Websites, die auf ein grid layout setzen habe ich noch nicht so gefunden, dass ich mir deren Quellcode hätte ansehen können.
Danke schon vorab.