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. ~~~css .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 ~~~css .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

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. ~~~css .container { grid-template-columns: 1fr minmax(1fr, 30em); } ~~~ 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 ~~~css .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