Henry: Grid Anordnung ohne Media Querys ändern je nach device?

SELF-Forum

Grid Anordnung ohne Media Querys ändern je nach device?

Henry (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Hallo,

das schöne an Grid ist ja die Flexibilität. So lassen sich ja zb. leicht Umbrüche erzielen ohne Media Queries.

Aber lässt sich auch die Anordnung beeinflussen?

Dieses Beispiel läst sich verschieben um eine Deviceänderung zu simulieren. Wenn also weit nach rechts, somit schmaler View, dann wäre die Handy-Ansicht:

  • 1
  • 2
  • 3
  • 4
  • usw.

Das möchte ich anders haben.

Bei breiterem View also Desktop oder Tablet siehts dann zb. so aus

  • 1 - 2 - 3
  • 1 - 4 - 5
  • usw.

Das ist OK so.

Jetzt die Frage, bei der Handy Darstellung hätte ich gerne:

  • 2
  • 1
  • 3
  • 4
  • usw.

Lässt sich das ohne Media Queries bewerkstelligen, bietet Grid da schon ein Hausmittel an?

Gruss
Henry

--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Grid Anordnung ohne Media Querys ändern je nach device?

    Rolf B
    – Informationen zu den Bewertungsregeln

    problematische Seite

    Hallo Henry,

    du kannst in grids mit automatischer Anordnung arbeiten, sprich: die Platzierung dem Brauser überlassen. Aber dann überlässt Du es auch.

    Wenn Du es je nach Viewport in einer konkreten Abfolge willst, musst Du wohl Media Queries verwenden, um Grid-Definition oder Zonenzuordnung in den grid children zu verändern. Warum willst Du die vermeiden?

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Grid Anordnung ohne Media Querys ändern je nach device?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    problematische Seite

    @@Henry

    Bei breiterem View also Desktop oder Tablet siehts dann zb. so aus

    • 1 - 2 - 3
    • 1 - 4 - 5
    • usw.

    Das ist OK so.

    Jetzt die Frage, bei der Handy Darstellung hätte ich gerne:

    • 2
    • 1
    • 3
    • 4
    • usw.

    Beim Anordnen von Elementen sollte man achtgeben, dass sich die visuelle Darstellung mit der Reihenfolge im DOM deckt – inbesondere, wenn interaktive Elemente (Links, Buttons, Eingabefelder, …) im Spiel sind. Wenn der Fokus bei Tastaturbedienung wild auf der Seite umherspringt, macht das die Bedienung ziemlich schwierig.

    Möglicherweise muss man dazu Inhalte doppelt im DOM haben:

    2 (nur sichtbar auf kleinen Viewports), 1, 2 (nur sichtbar auf großen Viewports), 3, 4, 5.

    In deinem Fall geht aber vielleicht auch die Reihenfolge 2, 1, 3, 4, 5 im DOM.

    Zur Anordnung im Grid ist da sicher ein Media-Query nötig.

    Was ist eigentlich zwischen einspaltig und dreispaltig? Gibt’s da noch zweispaltig?

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln