Mosaik + Detailzeile mit CSS

[x51398]

Hallo,

ich möchte folgendes Layout erreichen: ein Raster mit beliebig vielen Quadraten, responsiv mit x.., 4, 3, 2 oder einem Element pro Zeile. Beim :hover auf ein beliebiges Quadrat soll unter dessen Zeile ein 100% breiter dazugehöriger Inhalt eingeblendet werden, die restlichen Zeilen rutschen also nach unten.

Hier zur Veranschaulichung: Augangszustand

Hover

Ist das nur mit CSS möglich? Ein Denkanstoß oder weiterführender Suchbegriff wäre sehr nett.

Danke und viele Grüße Basti

[Gunnar Bittersmann]

@@x51398

Ist das nur mit CSS möglich?

Ja.

Ein Denkanstoß oder weiterführender Suchbegriff wäre sehr nett.

Grid, grid-auto-flow: row dense, grid-column: 1/-1;

LLAP 🖖

[x51398]

Lieber Gunnar,

vielen Dank! Wen es interessiert: Hier eine erste Umsetzung -> https://codepen.io/x51398/pen/YeLRQp

Über die richtige Elementwahl zur Darstellung einer solchen Struktur bin ich noch am Nachdenken...

Grüße

[Rolf B]

Hallo x51398,

ich weiß noch nicht, wie man es besser machen kann ohne andere lästige Auswirkungen zu bekommen, aber dein Layout flackert. Mach den Ausgabebereich deines Pen mal so hoch, dass es gerade noch keinen vertikalen Scrollbar gibt und durch den hover einer entstehen würde.

Und nun halte den Mauszeiger mal ganz knapp an den rechten Rand von einer der Boxen.

Was passiert: Durch den Hover erscheint der div, der lässt die Scrollbar erscheinen, das macht den Clientbereich schmaler, das macht die Box schmaler, nun ist die Maus im Zwischenraum, es hovert nicht mehr, der div verschwindet, die Scrollbar verschwindet, der Clientbereich wird breiter, das macht die Box breiter, nun hovert es wieder - goto start; goto Disco;

Problem ist die variable Breite des grid, man muss eine Lösung finden mit der die Breite nicht vom Scrollbar des Containers abhängt. Der naïve Ansatz wäre, dem Body ein overflow-y: scroll; zu geben; der zweite bestände darin, das grid auf eine Breite von calc(100vw - X) zu setzen - das führt aber zu einer mühsamen Rechnerei mit den Paddings und Margins der Eltern-Elemente. Bei mir hat X=50px funktioniert. Alles noch nicht gut.

Rolf

[Gunnar Bittersmann]

@@x51398

vielen Dank! Wen es interessiert: Hier eine erste Umsetzung -> https://codepen.io/x51398/pen/YeLRQp

Nicht tastaturbedienbar, meh! Die „Quadrate“ (bei dir gegenwärtig h3) mit tabindex="0" per Tastatur fokussierbar machen und die Stile nicht nur für :hover, sondern auch für :focus angeben! (Nicht, dass das Ding damit schon für alle Nutzer zugänglich wäre …)

Als Nutzer ist man versucht, mit der Maus von dem „Quadrat“ in die „Lasche“ zu fahren – und schwupps ist die Lasche weg! Wie gedenkst du dieses Problem zu lösen?

Über die richtige Elementwahl zur Darstellung einer solchen Struktur bin ich noch am Nachdenken...

Heißt du vielleicht … Beschreibungsliste? section →dl; h3 → dt; div → dd.

LLAP 🖖

[Gunnar Bittersmann]

@@x51398

vielen Dank! Wen es interessiert: Hier eine erste Umsetzung -> https://codepen.io/x51398/pen/YeLRQp

BTW: grid-template-columns: 25% 25% 25% 25% ist nicht so toll. Das Gute an Grid ist ja, dass man sich die Breiten nicht selber ausrechnen muss, sondern einfach sagen kann: Hömmal Browser, mach mal alle Spalten gleich breit:
grid-template-columns: 1fr 1fr 1fr 1fr

Oder noch besser: grid-template-columns: repeat(4, 1fr) – sprechender Code.

Aber du wolltest doch gar nicht 4 Spalten, sondern „responsiv mit x.., 4, 3, 2 oder einem Element pro Zeile“‽
Also grid-template-columns: repeat(auto-fill, minmax(⟨Mindestbreite⟩, 1fr)) ☞ flexible grid.

LLAP 🖖

[x51398]

Da ist noch viel zu tun... Danke!

[Henry]

Hallo x51398,

nur ein paar Fragen um das zu verstehen:

dein Codepenbeispiel hat ja noch Rechtecke. Sollen aber schon Quadrate sein? Was ist als Inhalt vorgesehen, Bilder oder Text?

Was soll im Hoverzustand erscheinen im Quadrat und in der Zeile?

Soll in der mobilen(responsive) Ansicht wirklich nur eine Verkleinerung des Ganzen stattfinden oder auch eine Verschiebung?

Gruss
Henry

[x51398]

Hallo Henry,

das Codepenbeispiel war nur ein erster Test, ob das Konzept "Detailbereich mit 100% Breite unter der jeweiligen Zeile einblenden" überhaupt funktioniert. Das Ganze soll evtl. so eine Art dynamische Sitemap werden - allerdings stehe ich momentan noch vor dem Problem, dass die übergeordneten "aktiven" Elemente dann auch beim Hover des eingeblendeten Unterelements aktiviert bleiben.

Vielleicht ist ein Ansatz mit verschachtelten Listen und dem Erzeugen des o.g. Erscheinungsbildes via Javascript der bessere Weg - mal sehen.

Grüße Basti

[Martl]

Hallo zusammen,

beim Querlesen der Thread-Überschriften: Mosaik‽ Da gibts doch was von NCSA? Ihr könnt einem aber auch einen Schreck einjagen.

Grüße, Martl