michaah: grid: 1fr 2fr; verhindern dass 1fr-Spalte < 1fr

Beitrag lesen

In meinen responsive design habe ich nun, ausgehend von "mobile first" insgesamt 4 Schritte eingebaut.

Beim 2-spaltigen Design ergibt sich jedoch das Problem, dass die sich dort befindlichen Grafiken je nach Viewportbreite von 100% auf (nahe) 0% skalieren, entgegen meiner Festlegung, dass diese Spalte 1fr breit sein soll. Erst nach dem runter skalieren kommt es zum Wechsel in das Einspalten Design.

Irgendwo (und das ist leider wohl eines meiner größeren Probleme, dass ich dann nicht mehr weiß wo ich etwas herhabe ... und dann nicht mehr zum Nachlesen finde) habe ich gelesen, dass bei grid die Spalten erst nach den längsten Wörtern aufteilt, und erst dann den verbleibenden Platz entsprechend der Festlegung verteilt. Ich gehe davon aus, dass genau dies hier der Fall ist.

Frage: Lässt sich das verhindern? Wie?

Mir wäre es viel lieber, das Design würde, statt die 1fr-Spalte herunter zu skalieren, stattdessen zur Ein-Spalten-Version wechseln. Den Punkt wo das Design von einer zu zwei Spalten wechselt kann ich ja durch einen entsprechenden em-Wert bestimmen. Aber, um diese unerwünschte Skalierung zu verhindern müsste ich diesen Wert viel höher setzen als ich es aus gestalterischen Gründen eigentlich wollte.

Lässt sich das beheben?

Gruß

M

PS: Es bleibt schwer nachvollziehbar, warum ausgerechnet "padding" (deutsch für "Polsterung") so unnachgiebig wie ein Fels in der Brandung daherkommt ... Für mich wäre es das erste Element, das für eine "Abpufferung" von Zwängen heran zu zeihen wäre.