Lücke in grid-Spalte

[Gast]

Hallo,
wie kann ich erreichen, dass in dem Beispiel der Text nicht nach vorne rutscht, wenn im ersten oder 2. Div nichts vorhanden ist?

[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

[Gast]

Hallo Rolf,
mit
60px max-content max-content;
funktioniert es, wie ich es mir vorstellte.
Danke

[Rolf B]

Hallo Gast,

Breiten in px anzugeben ist etwas, das man nach Möglichkeit vermeiden sollte.

Der Anwender kann im Browser zoomen. Breiten im 1em skalieren mit dem Zoom, Breiten in px nicht.

Verwende em für Textbreiten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Breiten in px anzugeben ist etwas, das man nach Möglichkeit vermeiden sollte.

Das ist richtig.

Der Anwender kann im Browser zoomen.

Das stimmt auch.

Breiten im 1em skalieren mit dem Zoom, Breiten in px nicht.

Das nicht. Hättest du auch mal ausprobieren können. ☞ Test

Beim Zoomen skalieren Breiten in px mit. Es sei denn, in den Browsereinstellungen des Firefox wurde die Option „Nur Text zoomen“ gesetzt:

Anders hingegen, wenn nicht (nur) gezoomt wird, sondern in den Browsereinstellungen die Schriftgröße geändert wird. In Chrome sehen die verschiedenen Felder so aus:

Verwende em für Textbreiten.

Das ist wieder richtig.

😷 LLAP

[Gast]

Hallo Rolf,
jetzt war ich doch zu voreilig. Mit drei divs sieht es so aus.
Wenn das erste div fehlt, dann so. Wünschen würde ich mir, dass

1. Text2 und text33333333333333333 an der ursprünglichen Stelle bleiben
   oder
2. die beiden Texte nach vorne verschoben werden, ihr Abstand untereinander aber im Gegensatz zum Beispiel 2 gleich bleiben.

[Rolf B]

Hallo Gast,

der Abstand zwischen text2 und text3 ändert sich, weil sie im Grid in neue Spalten rutschen. Für text2 gilt damit nun 3em als Breite, vorher war es max-content.

Wenn Du willst, dass text2 und text3 in den Spalten 2 und 3 bleiben, kann man entweder das div mit text1 weiterhin als Dummy erzeugen oder text2 und text3 mittels grid-column Eigenschaft in die Spalten 2 und 3 zwingen.

Wenn Du willst, dass der Abstand zwischen text2 und text3 gleich bleibt, selbst wenn sie nach vorn rutschen, taugt dein Spaltentemplate nicht. Es könnte sinnvoller sein, die Spaltenbreite auf auto zu setzen und mit justify-content:start die Spalten linksbündig zu setzen. Ohne diese justify-Angabe würden auto-Spalten verbreitert, bis die Spalten den verfügbaren Platz ausfüllen. Die Spaltenbreite selbst könntest Du dann mit einer width-Angabe für das jeweilige div, das die Spalte bildet, setzen.

Ob das eine Lösung ist oder nur wieder neue Probleme erzeugt? Ich weiß es nicht, denn ich habe das Gefühl, dass wir hier wild in der Gegend herumdoktern und Probleme lösen, die es vielleicht gar nicht geben muss.

Könntest Du bitte die fachliche Problematik, die Du lösen willst, verständlich beschreiben? Ohne auf CSS einzugehen. Was für Daten hast Du? Welche Konstellationen kommen vor? Wie soll es in welcher Konstellation aussehen?

Rolf

[Gast]

Hallo Rolf,
es sollen flexible Eingaben zugelassen werden.
Ich kann nicht schreiben, um was es konkret geht.
Aber es läßt sich in etwa so beschreiben.
Text1 könnte lauten: "nicht vorhanden" oder ein Datum oder Text "Geplant" oder andere Texte.
Text2 könnte lauten: "Einwohner:", "Kinder:", "Erwachsene:" u.a. Text3 könnte lauten: 2, 174, 23.443.234, Noch nicht bekannt", u.a. Natürlich sollte das Ergebnis lauten Kinder: 3445 und nicht Kinder: 3445

Edit Rolf B: Spaces visualisiert

[Rolf B]

Hallo Gast,

es sollen flexible Eingaben zugelassen werden.

Eingaben? Bisher war von Texten die Rede.

Aber verstehe ich das richtig, dass Text 1 eine Art Zusatzinfo ist, Text 2 ein Label und Text 3 der vom Label beschriebene Ausgabewert? Und dass sogar das Label gelegentlich fehlen kann?

Ich habe aber nochmal hochgeblättert. Du schriebst:

wenn im ersten oder 2. Div nichts vorhanden ist?

bedeutet das, dass die drei Elemente immer vorhanden sind, aber lediglich der Inhalt leer ist? Das passt dann nicht zu deinem anderen Beispiel, wo Du das Text1-div einfach mal weggelassen hast. Hier müsstest Du eine klare Aussage treffen: Welche Varianten des HTML gibt es, die zu formatieren sind? Und in welcher Variante muss was wo stehen?

Und erzähl noch mehr zu den Rahmenbedingungen. Reden wir hier von einem Grid, das immer einzeilig ist? Oder ist es eine variable Anzahl von Zeilen, und du willst erreichen, dass die Werte der 3. Spalte alle übereinander stehen? Solche Dinge haben massiv Einfluss auf sinnvolles Markup und Styling. Ohne das zu kennen, rate ich blind rum (und die anderen, die mitlesen und keine bessere Idee haben, auch). Vor allem können wir nicht beurteilen, ob ein Grid das Mittel der Wahl sein sollte oder nicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Und erzähl noch mehr zu den Rahmenbedingungen. Reden wir hier von einem Grid …?

Scheint mir nicht so. Wir reden von einer Tabelle.

😷 LLAP

[Rolf B]

Hallo Gunnar,

das habe ich auch schon eine Weile überlegt, aber ich bin noch nicht überzeugt, dass da tabellarische Daten (also mit einer echten 2D Komponente) dargestellt werden.

Rolf