flexible Bilderwand

[bugfix]

Moin Matthias,

Ok, sieht dich ganz gut aus!

Find ich egentlich auch, danke :)

Warum willst du auf media queries verzichten? Sie sind prinzipiell nützlich - man sollte sie jedoch nach dem Inhalt ausrichten, nicht nach eventuellen Geräteabmessungen.

Sicherlich peinlich aber ich hatte eigentlich gedacht relative Maßangaben verhalten sich wie Prozentuale Angaben, tun sie aber nicht. Außerdem war ich der Hoffnung, dass "responsive Raster ohne Media Queries" auch ohne solche funktionieren; wie blöd 😵 ...

In Deinem Fall hat .square-container ein padding: 3em 5em . Das sieht auf großen Bildschirmen evtl. noch ganz ok aus - auf meinem Handy aber nicht. Deshalb würde ich hier ansetzen:

/* Kompaktes Layout für mobile Geräte */
.square-container {
    padding: 0;
}

@media (min-width: 30em) { 
  /* Layout für breitere Bildschirme */ 
.square-container {
    padding: 3em 5em;
}

Habs versucht, komischer Weise ändert sich dadurch das Verhalten, wenn der Bildschirm kleiner wird, würde ich mit etwas Gefummel sicher auch hin bekommen aber meine Lösung funktioniert jetzt auch ohne Media Queries, ich hab das padding einfach mit prozentualen Werten gefüttert, das löst mein Problem auf einfache Weise (watt bin ich stolz auf mich). Wär doch so auch OK, oder?

Ich habe noch etwas zum HTML zu sagen: Du hast eine Div-Suppe:

hm :( komm ich am besten mit klar...

Ich habe jetzt grad nachgelesen, wie man die Quadrate in Grid erzeugt (https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3) und verstehe, warum Du die .square mit

.square {

    padding-top: 100%;
}

versiehst. Die anderen Angaben sind imho überflüssig, bzw könntest du am Anfang des CSS dies setzen:

*, ::before, ::after { 
  box-sizing: border-box; 
}

IMHO könntest Du diese Klasse aber auch auf das a-Element anwenden:

<a class="square" id="rumpelpumpel" href="https://jungmann.photo/20181231wholeyear/images/pic00.jpg" data-lightbox="rumpelpumpel" data-title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost">
   <img src="photo-Dateien/pic00_011.jpg" alt="Schloss Bruchsal" title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost" width="800" height="533">
</a>

Da muss man wsl. a und img etwas anders gestalten (display: inline-block)

ich versuch mich mal dran, schätze aber das wird so schnell nix Gutes...

Ich würde mich (aber erst) am Wochenende mal an eine Version von mir machen.

Bin gespannt wie ne Steinschleuder.

zweitens: im IE wird kein Grid angezeigt sondern alles einfach untereinander, das ist irgendwie blöd. Beim rumstöbern hab ich auch nix brauchbares dazu gefunden... hast du evtl einen Tipp?

https://caniuse.com/#feat=css-grid

Der IE 10-11 hatten eine Version, in der Du die Angaben mit Browser-Präfix versehen musstest:

.square-container {

display: -ms-grid;
display: grid;
}

So etwas wie auto-fill kann er aber trotzdem nicht. Ich würde aber darauf verzichten. Diese Versionen sterben aus!

Du würdest dich wundern wie viele Leute in der Mittagspause bei mir rumklicken (ok, nicht gerde unerschöpflich viele aber) ne menge Firmen (so auch die, in der ich mein Lohn und Brot verdiene) haben im Softwerepool diesen doofen alten MS Browser. Imho wird es noch 3-5 Jahre dauern bis das Teil nicht mehr genutzt wird, so lange laufen nämlich die meißten Leasings bei Dell, HP und Co.

Danke schon mal im Voraus & auf Wiederlesen!

der torsten