Lücke in grid-Spalte
bearbeitet von Rolf BHallo 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 Aufteiling mit gleichbleibendem 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:
~~~css
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_
--
sumpsi - posui - obstruxi