Mehrere textteile in eine Grid-Zelle(?)

[Sibold]

Hallo,
wenn ich weiß, dass ich drei Texte hintereinander anordnen möchte, könnte ich dies mit grid
so
machen. Wenn es aber nicht immer gleich viele Textstücke sind, würde ich gerne nur eine Spalte definieren und die im vorliegenden Falle drei Texte in diese eine Grid-Zelle einfügen (heißt es Grid-Zelle?).
Geht dies?
Ich hatte gedacht, ich packe sie in ein Div, aber das klappte so nicht.

[Rolf B]

Hallo Sibold,

der Grid-Debugger von Chrome oder FF zeigt, dass dein main-Grid zwei Zeilen und drei Spalten hat. Dein div ist in Zeile 2, Spalte 1 und enthält alle 3 p Elemente.

Die Grid-Visualisierung der Entwicklerwerkzeuge (hier: Chrome) zeigt das. FF hat sowas auch. Ich habe nur den p Elementen etwas Padding hinzugefügt, damit die Gridline-Nummern nicht alle ineinander hängen.

Rot: main-grid. Dein column-Template hat 3 Spalten. Weil aber 4 Elemente da sind, kommt das div in eine neue Zeile.

Orange: div-grid. Dein column-Template dafür hat eine Spalte, darum steht alles untereinander.

Welche Anordnung möchtest Du denn haben? Das habe ich aus deinem Beitrag nicht verstanden.

Rolf

[Sibold]

Hallo Rolf

Welche Anordnung möchtest Du denn haben? Das habe ich aus deinem Beitrag nicht verstanden.

Ich möchte die Anordnung wie in der ersten Zeile des jsfiddle-Beispiels, allerdings nicht in drei Spalten sondern in einer Spalte.
Gruß
Sibold

[Rolf B]

Hallo Sibold,

dann hätte ich zwei Alternativen zur Auswahl:

• Flexbox statt Grid
• Grid mit grid-auto-flow:column; (⇒ Selfwiki)

Rolf

[Sibold]

Hallo Rolf,
mit Deinem Vorschlag sind die beiden ersten Texte jetzt wie es sein soll
(siehe). Text3 steht zwar in der gleichen Zeile aber nicht linksbündig.
Kann man nicht definieren, dass das div-Element als ein Block gilt ohne Rücksicht der enthaltenen Blöcke. Ich habe jetzt hier statt <p> das <span> verwendet in der Hoffnung, dass diese dann in einer Zeile bleiben, aber leider nicht.

[Rolf B]

Hallo Sibold,

Text3 steht zwar in der gleichen Zeile aber nicht linksbündig.

Es steht linksbündig in seiner Grid-Zelle. Nur - die Gridzelle mit Text2 darin ist zu breit geworden. Dazu erzähle ich ich gleich was.

Kann man nicht definieren, dass das div-Element als ein Block gilt ohne Rücksicht der enthaltenen Blöcke.

Das muss man nicht definieren. Ein div ist immer ein Block.

Aber Du hast ganz nonchalant die Spielregeln geändert, indem Du das main Element nicht mehr als Grid definiert hast. Statt dessen hast Du nun zwei unabhängige Grids, untereinander.

Das hat Folgen. Vorher war das Grid, für das Du grid-auto-flow gesetzt hast, eine andere Grid-Zelle, für die max-content als Breitenangabe galt. Jetzt ist div.c2 eigenständig und breitet sich deshalb - weil Du für das div keine Breite gesetzt hast, über die Viewportbreite aus. Die Grid-Zellen darin verhalten sich nun so wie bestellt, und das ist nicht ganz so simpel. Du hast in grid-template-columns nur eine Spalte definiert. Die Breitenangabe max-content gilt nur für diese eine Spalte. Ein row-template hast Du gar nicht definiert, darum stellt das Grid "überzählige" Elemente in neue Spalten. Die haben aber keine Breitenvorgabe, und haben nun den Defaultwert für die Breite: auto. Was bedeutet: sie breiten sich über den verfügbaren Platz aus. Das siehst Du, wenn den p Elementen mal einen border gibst.

Was tun? Du kannst dem div.c2 width:max-content geben. Das reduziert den verfügbaren Platz. Oder Du kannst dem Grid sagen, dass es die undefinierten Spalten nicht ausbreiten soll. Dafür dient die justify-content Eigenschaft, deren Default stretch ist. Die kannst Du auf start setzen (start wie "am Beginn der Leserichtung"). Oder Du machst es wie zu Beginn und steckst das c2 Grid in eine andere Grid-Zelle hinein, für die eine Breite von max-content gilt.

Was richtig ist? Keine Ahnung. Da Du nicht schreibst, welches Layout Du eigentlich anstrebst (bzw. das, was Du anfangs als Ziel erklärt hast, auf einmal nicht mehr zu verfolgen scheinst), kann ich nur Möglichkeiten auflisten.

Wie sich Breiteneinstellungen auswirken, kannst Du auf zwei Arten visualisieren. Du kannst den Elementen einen Rand geben. Oder Du nimmst die Entwicklungswerkzeuge des Browsers. Die zeigen Dir das Grid-Raster, und sie zeigen Dir für jedes Element seine Grenzen, incl. Padding und Margin.

Rolf

[Sibold]

Hallo Rolf,
danke für die Unterstützung.
Zunächt nur eine Antwort auf Deine Fragen. Deine Vorschläge werde ich mir heute nachmittag genauer ansehen.

Aber Du hast ganz nonchalant die Spielregeln geändert, indem Du das main Element nicht mehr als Grid definiert hast. Statt dessen hast Du nun zwei unabhängige Grids, untereinander.

Ich möchte dadurch einfach etwas mehr über die Wirkung von kleineren Änderungen erfahren.

Was richtig ist? Keine Ahnung. Da Du nicht schreibst, welches Layout Du eigentlich anstrebst (bzw. das, was Du anfangs als Ziel erklärt hast, auf einmal nicht mehr zu verfolgen scheinst), kann ich nur Möglichkeiten auflisten.

Welches Layout?
Gute Frage. Ich erhalte über eine Eingabe 1 oder 2 oder 3 oder gar 4 einzelne Textblöcke. Diese sollen lückenlos nebeneinander angezeigt werden. (Text1|Text2|Text3 oder Text1|Text4) In der Regel sind die Texte so kurz, dass sie auch bei kleinen Bildschiremn in eine Zeile passen, ggf aber Fortsetzung in Folgezeile.

[Rolf B]

Hallo Sibold,

1 oder 2 oder 3 oder gar 4 einzelne Textblöcke. Diese sollen lückenlos nebeneinander angezeigt werden.

Ok, klassischer Fall von AB-Problem. Oben steht Problem A. Du möchtest das mit Grid lösen und hast Schwierigkeiten (Problem B).

Die hätte ich auch. Also lösen wir Problem A lieber anders. Dafür brauchst Du nämlich gar kein spezielles Layoutmodul. Die Texte sollen ihre natürliche Breite haben, und es soll keine Verteilung auf die Breite des Fensters erfolgen? Zum Beispiel so?

Hello World | Willkommen bei Selfhtml | Guten Morgen |
Dies ist Block 4

Setze jeden Textblock in ein <span> Element. Gib den span-Elementen per CSS die Eigenschaft display: inline-block;. Grid oder Flex sind nicht nötig, oder nur dann, wenn Du bestimmte Anforderungen an die horizontale oder vertikale Ausrichtung der Textblöcke hast.

Guckst Du: https://jsfiddle.net/Rolf_b/bu5t16p2/

Mit dem kleinen Eingabefeld kannst Du einstellen, wie viele Textblöcke Du haben willst. Das JavaScript generiert sie per Zufall aus einem kleinen Vorrat. Der Umbruch passt sich automatisch an die Viewportbreite an. Die roten Rahmen visualisieren lediglich die Grenzen der span Elemente.

Rolf

[Sibold]

Hallo Rolf,

Grid oder Flex sind nicht nötig, oder nur dann, wenn Du bestimmte Anforderungen an die horizontale oder vertikale Ausrichtung der Textblöcke hast.

Die Ausrichtungen werde ich schon benötigen.

Guckst Du: https://jsfiddle.net/Rolf_b/bu5t16p2/

Habe geguckt ;-)
Aber Javascript kommt bei mir vorerst nicht in Frage.
Ich bin schon mit HTML und CSS genug ausgelastet.
Gruß
Sibold

[Rolf B]

Hallo Sibold,

wenn Du Hilfe haben möchtest dann

• solltest Du versuchen, zu verstehen was andere schreiben
• klar sagen, was Du brauchst.

So wird das nichts.

Das JavaScript in meinem Fiddle generiert lediglich eine flexible Anzahl von Textblöcken, es simuliert sozusagen deinen Serverteil. Es hat nichts mit der Formatierung zu tun. Die erfolgt rein per CSS. Was an HTML generiert wird, siehst Du im Inspektor der Entwicklungswerkzeuge. Hast Du die überhaupt schon mal aufgerufen?

Wenn Dir die Darstellung so nicht passt, dann rück endlich mal mit einer vollständigen Anforderungsliste heraus.

Rolf

[Mr.Murphy]

Mir ist auch noch nicht klar was du eigentlich willst.

Wenn du Blockelemente wie das p-Element nebeneinander darstellen willst ist Flex grundsätzlich die geeignete Wahl.

Wenn es weitere Anforderungen gibt eventuell auch CSS-Grid.

[Rolf B]

Hallo Mr.Murphy,

ICH will nur rauskriegen, was Sibold eigentlich will.

Flexbox geht natürlich auch, aber ein einfaches hintereinanderstellen von inline-block Elementen erfüllt, scheint mir, den gleichen Zweck. Die Darstellung soll wohl linksbündig erfolgen ("Textblöcke. Diese sollen lückenlos nebeneinander angezeigt werden."), und das kann ich mit drei Flexbox Eigenschaften machen:
display:flex; flex-wrap: wrap; justify-content:start
oder man verwendet den normalen Flow von inline-block Elementen. Gleicher Effekt.

Grid führt zu einem regelmäßigen Raster, aber ob das erforderlich ist und nach welchen Regeln es erfolgen soll, wird mir aus Sibolds Darstellungen nicht klar.

Rolf

[Mr.Murphy]

ICH will nur rauskriegen, was Sibold eigentlich will.

Darin wollte ich dich unterstützen. Du bist nicht der Einzige, der Sibolds Wünsche nicht versteht.

[Sibold]

Hallo,
ich weiß nicht, wie ich es noch erklären sollte.
Ich habe gelesen, dass mit grid eine sehr flexible und moderne Positionierung von Elementen möglich ist.
Dies war der Grund, dass ich mein erstes Beispiel mit grid begonnen hatte und dazu die erste Anfrage stellte.
Eine solche grid-Zelle soll nun lückenlos ein oder mehrere Texte (lückenlos aneinandergefügt) enthalten. Die Anzahl der Texte ist flexibel, da sie durch Eingaben festgelegt werden.
Wie in der ersten Zeile meines ersten Beispiels sollen die Texte 1-3 aneinander stehen, allerdings nicht wie in dem Beispiel in drei Zellen sondern in einer Zelle.
Ich kann nicht ausschließen, dass in ferner Zukunf statt eines Textes ein Foto o.ä. eingefügt werden soll, aber dies möchte ich jetzt nicht betrachten.

[Matthias Scharwies]

Servus!

Hallo,
ich weiß nicht, wie ich es noch erklären sollte.
Ich habe gelesen, dass mit grid eine sehr flexible und moderne Positionierung von Elementen möglich ist.

Ja!

Dies war der Grund, dass ich mein erstes Beispiel mit grid begonnen hatte und dazu die erste Anfrage stellte.
Eine solche grid-Zelle soll nun lückenlos ein oder mehrere Texte (lückenlos aneinandergefügt) enthalten. Die Anzahl der Texte ist flexibel, da sie durch Eingaben festgelegt werden.

Gut. Dann Lege ein Elternelement (div class="container") und Kindelemente (etwa div) fest.

Wie in der ersten Zeile meines ersten Beispiels sollen die Texte 1-3 aneinander stehen, allerdings nicht wie in dem Beispiel in drei Zellen sondern in einer Zelle.

Dann kommen in dieses div 3 p-Absätze.

Mit grid formatierst du nur die drei Kindelemente des Grid-Containers. Die drei Textabsätze (Kindes-Kinder) oder Bilder bleiben davon unbenommen!

Ich kann nicht ausschließen, dass in ferner Zukunf statt eines Textes ein Foto o.ä. eingefügt werden soll, aber dies möchte ich jetzt nicht betrachten.

Herzliche Grüße

Matthias Scharwies

[Sibold]

Hallo Matthias, deine Lösung scheint mir zu statisch. Ich erinnere an meine Aussage:

"Ich erhalte über eine Eingabe 1 oder 2 oder 3 oder gar 4 einzelne Textblöcke".

Die Lösung von Rolf macht aber das was ich dachte.

Danke auch an Dich
Sibold

[Rolf B]

Hallo Sibold,

Eine solche grid-Zelle soll nun lückenlos ein oder mehrere Texte (lückenlos aneinandergefügt) enthalten.

Nur damit wir nicht aneinander vorbeireden. In deinem verlinkten Fiddle ist das main-Element der Grid-Container. Du teilst ihn mit der grid-template-columns-Eigenschaft in drei Spalten auf.

Dieser Grid-Container enthält vier Kind-Elemente. Dreimal p und einmal div. Dies sind die Grid-Elemente. Weil es mehr Elemente als Spalten gibt, macht das Grid eine neue Zeile auf.

Damit hast Du sechs Grid-Zellen. Ohne weitere Angaben werden die Grid-Elemente so, wie sie vorgefunden werden, in die Zellen einsortiert. Deswegen sind deine 3 p Elemente in den Spalten 1, 2 und 3 der Zeile 1, und dein div ist in Spalte 1 der Zeile 2.

In diesem div hast Du ein neues Grid aufgemacht. Das div ist damit gleichzeitig Grid-Element (des main-Grid) und ein Grid-Container. Dort definierst Du nur eine Spalte. Deswegen werden die p in diesem div untereinander angeordnet. Mit grid-auto-flow:column; werden neue Spalten angelegt statt neuer Zeilen. Und weil das in einer Grid-Zelle des main-Grid passiert, für deren Spaltenbreite max-content gesetzt wurde, steht das auch alles schön eng beieinander.

Da waren wir schon einmal. Allerdings hast Du bei der Umsetzung dann den Ansatz geändert und das main-Grid entfernt, woraufhin die Texte der zweiten Zeile in einem eigenen Grid mit eigenen Eigenschaften standen und es Dir nicht mehr gefiel. Wenn man für das div nur grid-auto-flow:column hinzufügt, sieht es so aus (ich habe den p-Elementen noch einen roten Rand gegeben):

https://jsfiddle.net/Rolf_b/exgq392h/

So. Damit sind die Texte im div lückenlos nebeneinander, wie gewünscht. Der "Text1" der ersten Zeile ist nun vom "Text2" getrennt. Das ist unvermeidlich, weil ja die Spalte 1 nun - wegen den Texten in Zeile 2 - mehr Platz braucht. Und ein Grid ist ein Raster.

Wenn Dir das so nicht gefällt, dann hast Du wohl noch eine Anforderung an das Aussehen unterschlagen.

Rolf

[Sibold]

Hallo Rolf,
besten Dank,
so habe ich das gedacht.
Ich habe es gleich mit zusätzlichen Texten getestet.
Gruß
Sibold

PS: Ich werde die im thread vorgestellten jsfiddle-Beispiele benutzen und daran herumändern, um mich mit dem grid noch vertrauter zu machen.
Ich fürchte, dass ich Euch gelegentlich wieder ansprechen, pardon: anschreiben werde.
Schöne Grüße an alle Unterstützer
Sibold

[Sibold]

Hallo Rolf,
ich habe es befürchtet!
Da bin ich wieder. Deine Aussagen, dass ich zwischendurch die Basis geändert habe, indem ich das grid in main entfernt habe. hat mich nachdenklich gemacht, und ich habe jetzt einmal herumgespielt.
Dabei ist mir folgendes aufgefallen. Eine Änderung erfolgt, wenn ich die grid-template-columns-Zeile weglasse. In grid-template-columns: repeat(3, max-content);
kann ich allerdings zahlreiche Veränderungen vornehmen, ohne dass sich im Ergebnis in der zweiten korrekten Zeile etwas ändert, z.B.:
grid-template-columns: repeat(315, auto);
grid-template-columns: repeat(1, min-content); und andere.

Vielleicht wirst Du schreiben "das ist doch logisch", für einen Anfänger wie mich ist dies doch seltsam. Manchmal mache ich eine Änderung in der Annahme, sie wirke sich nicht aus, und sie hat doch gravierende Folgen. Hier aber mache ich deutliche Änderung ohne für mich sichtbare Folgen!

[Rolf B]

Hallo Sibold,

ohne einen Link auf das Fiddle, das den Fehler zeigt, kann ich Dir nicht sagen, ob und wo Du irgendwo einen kleinen Tipp- oder Denkfehler drin hast.

Ein repeat(315, ...) erzeugt ein Grid mit 315 Spalten. Das div sollte dann aus der 1. Spalte der 2. Zeile in die 4. Spalte der 1. Zeile rutschen.

Der Unterschied zwischen min-content und max-content fällt auf, wenn deine Texte Leerstellen enthalten. Sie werden dann von min-content umgebrochen.

min-content bedeutet: Mach die Spalte so breit wie unbedingt nötig, aber nicht breiter. Ohne automatische Silbentrennung bedeutet das: so breit wie das breiteste Wort.

max-content bedeutet: Mach die Spalte so breit, dass alles nebeneinander passt, was nebeneinander möchte. Aber nicht breiter.

Mit Silbentrennung und flexiblen Breiten kann das alles sehr variabel werden:

https://jsfiddle.net/Rolf_b/exgq392h/1/

Rolf

[Sibold]

Hallo Rolf

ohne einen Link auf das Fiddle, das den Fehler zeigt, kann ich Dir nicht sagen, ob und wo Du irgendwo einen kleinen Tipp- oder Denkfehler drin hast.

Mea culpa!
Zur Info:
Das fiddle finde ich nicht mehr, ich habe es aber hier noch einmal erstellt. Da ich nur den 2. Fall (2. Zeile) betrachtet hatte, habe ich das html für diese entfernt.
In allen dort stehenden Varianten des grid-template-columns hatte ich keine Unterschiede im Ergebnis festgestellt.
Schönen Gruß
Sibold

[Rolf B]

Hallo Sibold,

ja wie denn auch? Du hast nach wie vor zwei Grids, eins für das main-Element, eins für das div-Element. Und deine Variationen hast Du für das main-Grid durchgeführt.

Aber Du hast wieder mal die Welt verändert, bevor Du gespielt hast: Das div ist nun das einzige Kind des main-Elements, d.h. von den Rasterzellen des main-Grids wird nur eine belegt. Es ist also relativ egal, wieviele max-content Spalten Du definierst, ob eine, zehn oder zehn Millionen, nur die erste ist belegt und die übrigen existieren mit Breite 0.

In dieser einen Zelle ist dein div-Element, selbst ein Grid. Der Inhalt sind 3 Zellen, deren Inhalt nur aus einem einzigen Wort besteht. Also etwas, worauf min-content und max-content keinen Einfluss hat, ein Wort hat keinen Spielraum für eine Breitenvariation. Das div ist in seinen Ausmaßen daher ebenfalls festgelegt, und damit führen im main-Grid min-content und max-content ebenfalls zum gleichen Ergebnis.

Dürfte ich zum gefühlt drölften Mal erwähnen, dass hier die Entwicklerwerkzeugen deines Browsers nützlich sind, um das Grid zu visualisieren?

Rolf