[Gelöst]

Webdesign: Frage an die CSS-Profis:
Ich möchte drei Bereiche in einem Grid so anordnen, dass bei voller Bildschirmbreite (100%) alle drei Bereiche nebeneinander stehen (je 1fr).

Also:
1 | 2 | 3

Beim Verkleinern des sichtbaren Bereichs (Portrait-Modus Tablet) sollen Bereich 1 & 2 nebeneinander (50%) und der dritte Bereich über die ganze Breite (100%) darunter rutschen.

Also:
1 | 2
3,
1 | 2
3

Wird der sichtbare Bereich noch kleiner (Portrait-Modus Smartphone), sollen die Bereiche einfach alle untereinander stehen.

Also:
1
2
3

Und das über viele Bereiche immer so weiter.

Wie kann ich das im CSS realisieren, dass also immer der dritte Bereich über die volle Breite unter 1 & 2 angeordnet wird?

(Anwendungsfall: Sprache 1 | Übersetzung | Vokabelliste)

#Webdesign #CSS #Grid #GridLayout
Untitled

...

@rina
Danke!
Nicht ganz: es fehlt der "Zwischenschritt", bei dem die Vokabelliste unter "Sprache 1" und "Übersetzung" springt und sich auf die ganze Breite (100%) ausdehnt.
@fasnix 😕 ist?
@rina
Ja, so, aber wenn ich bei mir das Fenster verkleinere, erscheint das so nicht 🤔

(Zen Browser, Firefox Fork)
@fasnix (librewolf, firefox fork)

ich hab es jetzt noch im chrome und firefox selber getestet ich hab alle 3 states
@rina
Ah, jetzt, ja.
Hatte vorhin wohl zu schnell verkleinert /o\

Danke, das hilft mir sehr weiter! :)
@fasnix nice. viel spass damit