Lücke in grid-Spalte

[Rolf B]

Hallo Gast,

indem Du passende Breitenangaben wählst. max-content bedeutet: mach die Spalte so breit, wie der Inhalt es braucht.

Kein Inhalt, keine Breite.

Es gibt verschiedene Ansätze zur Lösung, und Du müsstest genauer beschreiben, wie Du Dir das Verhalten des Grid bei unterschiedlichen Verhältnissen vorstellst. Sollen die Spalten immer gleich breit sein? Soll es Spielraum für minimale und maximale Breite geben? Welche Abhängigkeiten zu den Inhalten in den Spalten siehst Du?

Für eine Aufteilung mit gleich bleibendem Verhältnis gibt es die Einheit fr - Fraction. Wenn Du Spaltenbreiten in fr angibst, werden alle fr-Angaben addiert und jede fr-Spalte bekommt soviel Platz, wie ihr fr-Wert Anteil an der Summe hat.

Beispiel:

   grid-template-columns: 10em 1fr 2fr;
   gap: 0.5em

Wenn das gesamte Grid 47em breit ist, dann würde 1em für die beiden Lücken reserviert (wegen gap: 0.5em) und 10em für Spalte 1. Es bleiben 36em. Da die Summe der fr 3 ist, werden die 36em in 3 Teile geteilt. Spalte 2 bekommt 1/3 und Spalte 3 bekommt 2/3 davon, also 12em und 24em.

Im einfachsten Fall gibst Du als Template an: repeat(3, 1fr);, dann bekommst Du drei gleich breite Spalten.

Rolf