Mehrere textteile in eine Grid-Zelle(?)

[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