Hallo,
ich breche mir die Finger an einem Grid. Es hat 2 Spalten. Diese Spalten sollen gleich breit sein, die rechte Spalte aber nicht breiter als 30em. Die Frage, wie man eine Minimalbreite sicherstellt, ist irrelevant, dafür gibt's eine @media Abfrage.
.container{grid-template-columns: 1fr minmax(1fr, 30em);gap: 1em;}wäre naheliegend, ist aber verboten. 1fr darf nur als Maximum verwendet werden.
Einfach 1fr 1fr nehmen und dem Grid-Item der rechten Spalte eine max-width von 30em geben nützt nichts. Dann wird die Spalte trotzdem breiter und das Item darin füllt sie einfach nicht aus.
Mit 1fr auto und max-width:30em auf dem Item ist es auch bei einer Containerbreite von unter 70em gnadenlos 30em breit. Abgesehen ist die max-width Lösung sehr unpraktisch, wenn es mehr als eine Row im Grid gibt.
Nach etwas Fummeln kam ich auf
.myGrid{--gap: 1em;grid-template-columns:minmax(calc(50% - var(--gap)/2),1fr)minmax(0em, 30em);gap:var(--gap);Zur Anschauung: https://jsfiddle.net/e8w6bq7g/
Das tut was es soll, aber ich find's scheußlich. Vor allem die Gap-Rechnerei. Das muss doch ein Standardfall ein - gibt's da keine einfache Notation für?
Rolf
sumpsi - posui - obstruxi
