Der Knackpunkt ist doch „kannst Du mit cqw/cqh arbeiten“. Aber die beziehen sich auf die Größe des gesamten Cntainers (hier eben: das grid). Und damit wird das Ergebnis eben „mal zu groß, mal zu klein“:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, …);
…
}
ist nicht mal nötig. Schon das „gewöhnliche fr“ liefert ja keinen Wert, den man „in die Hand nehmen kann“. Einziger „Ausweg“: man nagelt alles fest:
:root { --FIX: 200px; }
.container {
display: grid;
grid-template-columns: repeat(4, var(--FIX));
…
.item {
max-inline-size: var(--FIX);
…
}
Aber wieso sollte man da dann noch grid verwenden? Und wenigstens in so einer „Lösung“: wofür @container?