+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Css (https://javascript-forum.de/forumdisplay.php?fid=7)
+--- Thema: Grid oder Flex (/showthread.php?tid=2813)
Grid oder Flex - envoy - 20.03.2024
Ich habe eine bestehende ältere Seite dich gerne anpassen und aktualisieren möchte. Ich habe das, was ich bisher gemacht habe, mit float und einer table aufgebaut,
aber das ist ja nicht mehr zeitgemäß und ich komme an einigen Stellen auch einfach nicht weiter, daher würde ich es gerne Responsive neu aufbauen.
Bin mir aber nicht sicher, ob besser mit Flex oder mit Grid. Für einen Ansatz wäre ich dankbar.
Ich habe mal skizziert, was ich genauer erstellen will, ich hoffe, man versteht es.
Viele Grüße
RE: Grid oder Flex - Sempervivum - 20.03.2024
Generell gilt: Flex ist geeignet für ein Layout, das nur in eine Richtung geht, x oder y. Grid wenn das Layout zweidimensional ist, ein Gitter, das sich in x- und y-Richtung erstreckt.
Demnach ist für deine Startseite ein Grid am besten geeignet.
Für Member 1 empfehle ich ein figure-Element mit figcaption für die Texte rechts. Das Bild und die Texte rechts kannst Du dann mit Flex nebeneinander anordnen. Das Layout rechts, wo der Button mit Beschriftung am unteren Rand angeordnet ist, lässt sich ebenfalls gut mit Flex realisieren, indem Du dem Button ein margin-top von "auto" gibst.
Ich nehme an, das Foto und der Text in Unterseite A und B sollen zentriert sein. Das kann man sehr gut mit Flex erreichen.
Die Navigation unten soll offenbar auf allen Seiten gleich sein. Dafür bietet es sich an, sie in eine getrennte Datei auszulagern und mit PHP-Include einzubinden.
RE: Grid oder Flex - rzscout - 21.03.2024
Hi,
du kannst auch Flexbox und Grid Layout kombinieren. Im Oberen Bild könntest du für das Raster ein Grid-Container erstellen damit die darin liegenden Elemente Grid-Items werden und in einem zweidimensionales Raster passen.
RE: Grid oder Flex - envoy - 22.03.2024
Ich habe den Textblock der Member in ein Grid-Layout gepackt, das funktioniert gut.
Für die Startseite würde ich auch noch ein Grid anlegen.
Was ich nicht hinbekomme, ist das wenn ich auf Startseite klicke nur der Inhalt des Slide1 = Startseite angezeigt wird.
siehe Codepen
https://codepen.io/exenvoy/pen/GRLmoLp
Wie kann ich für die Startseite und die anderen Unterseiten den "Memberwrapper" ausblenden und den Unterseiten den passenden Content zu weisen?
Viele Grüße
RE: Grid oder Flex - SVG-Fanboy - 22.03.2024
Doppelpost bei SELFHTML:https://forum.selfhtml.org/self/2024/mar/20/anker-funktioniert-nicht-richtig/1814247#m1814247
Wer soll ihm helfen - die oder wir hier?
Gruß SVG-Fanboy
RE: Grid oder Flex - Sempervivum - 22.03.2024
Na dann viel Spaß bei Selfhtml. Wenn ich mir dort die Diskussionen an sehe, kann ich nur sagen: Warum einfach wenn es auch kompliziert geht?