Lösung der Zusatzaufgabe (CSS Grid)

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Besser wäre es wohl, wenn die Zellen nicht herausragen, sondern maximal so breit wie der Gridcontainer sind.

Zusatzaufgabe:

Wie ließe sich das im CSS umsetzen? Media-Query wäre trivial. Aber wie geht es ohne?

Der Trick ist, bei der Festlegung des Grids bei der Breite der Spalten nicht zu sagen: mindesdest 10em (bspw.);
sondern: mindesdest 10em, aber höchstens 100%, d.h. min(10em, 100%):

grid-template-columns: repeat(auto-fit, minmax(min(10em, 100%), 1fr));

Siehe Codepen.

😷 LLAP