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

[Gunnar Bittersmann]

@@Rolf B

Bevor ich ich mich auf die Suche nach einer Lösung mache, würd ich gern das Problem verstehen.

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.

Das heißt, beide Spalten sollen nicht breiter als jeweils 30em sein (weil sie ja gleich breit sein sollen). Das ist vermutlich nicht das, was du willst.

Gehe ich recht in der Annahme, dass sie nur auf schmalen Viewports gleich breit sein sollen, auf breiten hingegen die rechte 30em breit und die linke nimmt sich den Rest (also mehr als 30em)?

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Gehe ich recht in der Annahme, dass sie nur auf schmalen Viewports gleich breit sein sollen, auf breiten hingegen die rechte 30em breit und die linke nimmt sich den Rest (also mehr als 30em)?

Gesetzt den Fall, meine Annahme wäre richtig. Brauchst wirklich ein Grid? Oder geht es dir nur um 2 Spalten nebeneinander? Dann bist du mit Flexbox wohl besser dran: guckst du Codepen.

Jolan tru

[Rolf B]

Hallo Gunnar,

ja, Annahme ist richtig. Aber wieso triffst Du Annahmen, hast Du Dir das Fiddle nicht angeschaut?

Ich meine, klar, Flexbox ist oft eine Alternative, aber ich müsste dann ein Dummy-Div um die rechte Spalte legen, weil die aus 2 Elementen besteht. Insbesondere müsste ich die rechte Spalte dann als vertikale Flexbox auslegen, mit flex:1 für das obere Element, um das gleiche Verhalten zu erreichen (Fiddle mit Gegenüberstellung Grid/Flex).

So soll es sich verhalten:

"UltraBreit-Darstellung": 1fr 30em (limitiert durch max-width am body, die bbbbb Zeile ist Leerraum wenn BBB nicht hoch genug ist - die Höhe von CCC soll auf max-content limitiert sein)

AAAAAAAAAAAAAA BBBBBBBB
AAAAAAAAAAAAAA BBBBBBBB
AAAAAAAAAAAAAA BBBBBBBB
AAAAAAAAAAAAAA bbbbbbbb
AAAAAAAAAAAAAA CCCCCCCC

"Breit-Darstellung" 1fr 1fr

AAAAAA BBBBBB
AAAAAA BBBBBB
AAAAAA BBBBBB
AAAAAA BBBBBB
AAAAAA BBBBBB
AAAAAA CCCCCC

"Schmal-Darstellung" 1fr, per @media-Query

AAAAAAA
AAAAAAA
AAAAAAA
AAAAAAA
BBBBBBB
BBBBBBB
BBBBBBB
CCCCCCC

Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen. Dann hätte ich eine magic number drin, gefällt mir nicht.

Eigentlich frage ich mich ja nur, ob ich zu blöd bin, um die Spaltendefinitionen für Grids zu verstehen, oder ob das tatsächlich so umständlich sein muss.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ja, Annahme ist richtig. Aber wieso triffst Du Annahmen, hast Du Dir das Fiddle nicht angeschaut?

Nein, habe ich nicht. Warum soll ich mir was anschauen, wo ich eh nichts erkennen kann? (wegen Dark-Mode)

Für Nerds in ihren Kellern mag JSFiddle ja OK sein; für mich ist es unbenutzbarer Scheiß.

Jolan tru

[Gunnar Bittersmann]

@@Rolf B

Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen.

So würde ich’s wohl machen.

Dann hätte ich eine magic number drin, gefällt mir nicht.

In Breakpoints kann man (noch) keine custom properties verwenden, oder?

Jolan tru

[Rolf B]

Hallo Gunnar,

Warum soll ich mir was anschauen, wo ich eh nichts erkennen kann? (wegen Dark-Mode)

Versteh ich nicht, CodePen ist doch auch dark. Anyroad, ich finde den Darkmode von Fiddle mittlerweile gut brauchbar, UND sie haben den Light-Mode wieder zurückgebracht. Oben rechts ist ein Button zum Umschalten, mit den Einstellungen "Light", "Dark" und "System". Ich bin bei Dark geblieben.

In Breakpoints kann man (noch) keine custom properties verwenden, oder?

Wieso fragst Du mich? Sowas frage ICH normalerweise DICH 😉
Nach meinem Verständnis geht das nicht. Ich hab's zwar mal ausprobiert (mit custom properties in :root), aber es passierte nichts. Gibt's Spec-Entwicklungen, die das anstreben?

So würde ich’s wohl machen.

Okay, d.h. eine @media-lose bessere Idee als mein minmax-Konglomerat hast Du auch nicht. Ich habe es auch mal mit AI versucht, gelegentlich ist der Kerl ja echt nützlich, aber diesmal hat er mir nur Müll angeboten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Versteh ich nicht, CodePen ist doch auch dark.

Für mich nicht. In seinen persönlichen Einstellungen kann man Light-Mode wählen. Allerdings steht das nur angemeldeten Nutzern zur Verfügung, buh.

Anyroad, ich finde den Darkmode von Fiddle mittlerweile gut brauchbar, UND sie haben den Light-Mode wieder zurückgebracht.

Oh, dann kann ich mir das ja doch anschauen.

Haben sich da viele Nutzer über den fehlenden Light-Mode beschwert oder haben die von sich aus mal jemanden mit Verstand machen lassen?

Oben rechts ist ein Button zum Umschalten, mit den Einstellungen "Light", "Dark" und "System".

So ganz ist der Verstand aber noch nicht durchgedrungen. Der Default sollte „System“ sein.

Und eigentlich braucht man den Umschalter auf einer Website nicht. Gibt es den Fall, dass jemand JSFiddle in einem anderen Farbschema ansehen will als alle anderen Websites? Ich denke, nein.

Ich bin bei Dark geblieben.

Das steht dir frei. Ich will ja nicht sagen, dass nur weil für mich Light-Mode besser ist, das doch bei anderen auch so sein müsste. Deshalb gibt’s ja die Einstellmöglichkeit im OS (bei Firefox auch im Browser), die Webseiten berücksichtigen sollten.

---

In Breakpoints kann man (noch) keine custom properties verwenden, oder?

Gibt's Spec-Entwicklungen, die das anstreben?

Ich erinnere mich dunkel, mal davon gehört zu haben.

---

Okay, d.h. eine @media-lose bessere Idee als mein minmax-Konglomerat hast Du auch nicht.

Doch; in einem anderen Posting.

---

Ich habe es auch mal mit AI versucht, gelegentlich ist der Kerl ja echt nützlich, aber diesmal hat er mir nur Müll angeboten.

Da hast du Glück. Ich habe bislang immer nur Schrottantworten von AI bekommen. Im Brustton der Überzeugung erzählt mir das Ding, die Sache wäre so und so. Was aber nicht stimmt. Darauf angesprochen, kommt ein lapidares „du hast völlig recht“ zurück mit einer neuen Antwort im Brustton der Überzeugung, die auch falsch ist. Nach drei bis vier Mal gebe ich entnervt auf.

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen.

So würde ich’s wohl machen.

Oder auch nicht.

Dann hätte ich eine magic number drin, gefällt mir nicht.

So magisch ist die Zahl gar nicht. Mit CSS-Präprozessor kann man die Berechnung im Code haben (Beispiel 1):

.container {
	$max-right-column-width: 30em;
	$gap: 1em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: $gap;
	
	@media (width >= 2 * $max-right-column-width + $gap) {
		grid-template-columns: 1fr $max-right-column-width;
	}
}

margin-block für body hast du genullt? Ansonsten würde der auch noch in die Berechnung einfließen.

Wenn man keinen CSS-Präprozessor verwendet, rechnet man den Wert selbst aus und schreibt die Rechenformel dafür an Ort und Stelle in einen Kommentar – dann ist Zahl auch nicht mehr magisch.

---

Es geht aber auch ganz ohne Rechnerei. Man wählt als Breakpoint einen Wert, der ungefähr beim Doppelten der Maximalbreite der rechten Spalte liegt (Beispiel 2):

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	
	@media (width >= 62em) {
		grid-template-columns: 1fr 30em;
	}
}

Damit ist sichergestellt, dass das Layout bei allen (größeren^[1]) Vieportbreiten vernünftig aussieht. Das ist, was Nutzer erwarten.

Beim Auf- und Zuziehen des Fensters können die Spaltenbreiten geringfügig springen, aber das ist völlig egal! Der einzige, der das Fenster auf- und zuzieht, ist der Webentwickler.

Jolan tru

---

1. Die Einspaltigkeit bei schmalen Viewports haben wir ja schon abgefrühstückt. ↩︎

[MrMurphy]

Ich habe mal ein Beispiel zum Ausprobieren und Rumspielen erstellt.

Dabei habe ich der linken Spalte eine Maximalbreite zugewiesen.

Bei schmalen Fenstern erfolgt die Anzeige einspaltig. Aber einer Breite von 800px erfolgt eine zweispaltige Darstellung, wobei die beiden Spalten gleich breit sind. Wenn die linke Spalte ihre Maximalbreite erreicht wächst nur noch die rechte Spalte.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grid mit minmax</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /* Basisangaben */
   @media all {
      * {
         box-sizing: border-box;
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1400px;
         margin: 1rem auto 2rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* Listen dl */
   @media all {
      dl {
      }
      dt {
         font-weight: bold;
         margin: 0.5rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* main */
   @media all {
      main {
         display: grid;
      }
      figure {
         max-width: 600px;
         margin: 0rem auto 0rem auto;
         display: grid;
      }
      img {
         grid-column-start: 1;
         grid-row-start: 1;
      }
      figcaption {
         background-color: hsla(207, 44%, 49%, 0.8);
         color: white;
         font-size: 1.4rem;
         font-weight: bold;
         padding: 0rem 0.5rem 0rem 0.5rem;
         justify-self: center;
         align-self: end;
         grid-column-start: 1;
         grid-row-start: 1;
      }
      .information {
         margin: 1rem 1rem 1rem 1rem;
      }
   }
   @media only screen and (min-width: 800px) {
      main {
         grid-template-columns: minmax(100px, 600px) minmax(100px, max-content);
         gap: 0.5rem;
      }
      figure {
         background-color: khaki;
         margin: 1rem 0rem 1rem 0rem;
      }
      section {
         background-color: linen;
      }
   }

   </style>
</head>
<body>
   <main>
      <div>
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Digital_design_of_woman_from_late_1980s_or_early_1990s.jpg" alt="Frau mit Telefon">
            <figcaption>Miss Management 1995</figcaption>
         </figure>
      </div>
      <section class="information">
         <h1>NYC Nr. 999</h1>
         <p>Die Dampflokomotive Nr. 999 der New York Central & Hudson River Railroad gilt als das erste Fahrzeug, das eine Geschwindigkeit von 100 mph (etwa 161 km/h) überschritten hat.</p>
         <p>Auf der 1893 durchgeführten Rekordfahrt der speziell für diesen Zweck gebauten Lokomotive wurden sogar 112 mph (181 km/h) gemessen, was auch außerhalb von Eisenbahner-Kreisen weltweites Aufsehen erregte. Allerdings bezweifeln Fachleute, dass diese Geschwindigkeit tatsächlich erreicht wurde.</p>
         <p>Im Jahr 1891 wurde auf der 702 km langen Strecke zwischen New York City und Buffalo ein neuer Zug eingeführt, der Empire State Express. Um die konkurrierende Pennsylvania Railroad im Vorfeld der World’s Columbian Exposition, der Weltausstellung in Chicago, werbewirksam zu schlagen, kam George H. Daniels, der Verantwortliche der Bahngesellschaft für den Personenverkehr, auf die Idee, mit dem Zug eine Rekordfahrt durchzuführen. Er plante die Überschreitung der „magischen“ 100-mph-Grenze (161 km/h), was als gewagtes Vorhaben galt, weil diese Geschwindigkeit um etwa ein Drittel über der normalen Höchstgeschwindigkeit des Zuges lag und es keine Erfahrungen in diesem Geschwindigkeitsbereich gab.</p>
         <p>Originaltext: <a href="https://de.wikipedia.org/wiki/NYC_Nr._999">https://de.wikipedia.org/wiki/NYC_Nr._999</a></p>
         <dl>
            <dt>Name</dt>
            <dd>Rolf B.</dd>
            <dt>Geburtstag</dt>
            <dd>37.14.1954</dd>
            <dt>Telefon</dt>
            <dd>[phone]</dd>
            <dt>E-Mail</dt>
            <dd>info@rolf_b.com</dd>
            <dt>Adresse</dt>
            <dd>47471 Entenhausen</dd>
         </dl>
         <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/may/09/grid-spaltenbreiten-limitieren/1819881#m1819881">https://forum.selfhtml.org/self/</a></p>
         <p>Beispielseite von Rolf B: <a href="https://jsfiddle.net/e8w6bq7g/">https://jsfiddle.net/e8w6bq7g/</a></p>
      </section>
   </main>
</body>
</html>