Grid - Spaltenbreiten limitieren

[Rolf B]

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