Könnt ihr mir bei der Erstellung einer Unterseite, welche als Galerie-Übersicht dient, helfen?
Wie im Titel schon beschrieben, möchte ich eine Unterseite "bauen", die eine Galerie-Übersicht darstellt.
Wenn man eine bestimmte CARD dann halt anklickt, wird man zu einer weiteren Blog-Unterseite mit dem bestimmten "Thema" als Bildfolge geleitet.
Ich habe schon mal etwas versucht: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__13-07-24_BG%C3%9C.html
Ich bin aber damit nicht ganz zufrieden, weil ich meine, dass da noch Fehler drinstecken.
Meine Frage dazu: Das Ganze funktioniert anscheinend nur, wenn ich jeder CARD eine feste Breite in PX gebe, sodass, wenn ich das Browserfenster zusammenschiebe, sich die Anzahl der Cards in der Reihe verringern und in die nächste Reihe rutschen. Das ist auch gewünscht und dazu nutze ich CSS-Grid.
Nur ist meine Frage, ob es eventuell noch eleganter geht oder nur auf diesem Wege.
Bei einem schmalen Browserfenster und zum Beispiel 500% Schriftgröße rutscht das Grid mit der Klasse work-wrapper seitlich rechts außerhalb meines html bzw. body hinüber. Woran liegt das wieder?
Könnt ihr da bitte einmal darübergucken und mir Tipps geben?
Grüße M.
1 Antwort
Bei mir rutscht nichts raus, da geht das, wie es soll. Liegt evtl. am Browser oder daran, dass du es auf einen unwirklichen Wert vergrößerst.
Die feste Preite in PX kannst du evtl. durch angaben in einer anderen Einheit ersetzen. An und für sich gibt es die Option das anzugeben aber nicht umsonst, andere mögliche Optionen findest du hier:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
Im Zweifel dann eben rm, Prozent oder sonstige relative Angaben nehmen.
NOPE, ist halt so, bei:
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
ist anscheinend als MINDEST Angabe ein PX-Wert notwendig.
UND: NOPE, % - Angaben sind auch nicht möglich, denn dann bleiben alle CARDS exact 20% (in einer Reihe) und rücken NICHT nach.
Das wundert mich etwas. Eigentlich sollte CSS ja andere relative Größen umrechnen können.
Ansonsten kannst du vielleicht irgendwie "inline-grid" verwenden? Je nachdem, was genau du tun möchtest.
Also laut der Grammatik auf der Website sollten Prozentangaben gehen. Aber nicht, wenn du "<fixed-size>" brauchst.
O.K. ja, darum fragte ich ja auch, ob es andere, villeicht bessere Möglichkeiten gibt. Ich fand im WEB ein PEN mit einem ähnlichen Beispiel und wendete es für mich an. Wichtig für mich ist lediglich, das bei einem verschmälerten Browserfenster, die Anzahl der CARDS sich verringert und in die nächste Zeile umspringen bis es dann nur noch eine CARD ist zum Schluss. Und das macht es auch. Ich hoffe auf eure Tipps und Tricks.
Wenn ich in meinem grid-template % - Werte einsetze dann erhalte ich nur fünf schmale cards in einer Reihe. Also Du meinst, das was ich grad hab ist quasi "<fixed-size>"? Ginge es noch anders? Oder ist es so wie ich es hab gut so?
Also Du meinst, das was ich grad hab ist quasi "<fixed-size>"?
Weiß ich nicht. kann auch sein, dass die Prozentangabe relativ zu einem Wert ist, der eben klein ist.
Ich mache das auch immer nur durch ausprobieren und googeln.
Ansonsten: Evtl. kannst du auch "display: flex" stattdessen nutzen, ich weiß nicht, ob das besser klappt.
Stimmt, "fr" habe ich noch nicht ausprobiert. Dann wird ja errechnet wieviel Platz für die entsprechende aktuelle Anzahl an CARDS benötigt wird. Mal ausprobieren. Wäre am einfachsten. Denn es ist so, ich möchte, wenn möglich, nirgendwo mehr Angasben in PX machen.
M.