CSS CSS Grid gleiche Breite für Spalte bei mehreren Grids

[Hendoul]

Hi

https://jsfiddle.net/GarfieldKlon/k7vnt0rc/

Ich möchte erreichen, dass column-1 immer gleich breit ist und zwar so breit wie der längste Inhalt von den column-1 divs. Also ich möchte keine fixe Breite angeben, das soll einfach immer so breit sein wie der längste Inhalt.

Wenn ich aus den einzelnen item-1 item-2 und item-3 jeweils ein grid-container mache, dann sind die column-1 nachher unterschiedlich breit. Und wenn ich noch ein <div> um all die item-1 etc. mache und das der grid-container ist, dann funktioniert es schon gar nicht.

Ich bin nur auf display-contents und subgrid gestossen. Beides ist aber noch nicht gut unterstützt und kommt für mich daher leider nicht in Frage.

Weiss jemand ob ich das so überhaupt erreichen kann? Ohne die Struktur des HTMLs zu verändern...

 

[Bagbag]

Sowas? https://jsfiddle.net/wxjf5cbo/1/

 

[Hendoul]

Im Prinzip ja, aber du hast die Struktur verändert, was ich nicht kann.

 

[Bagbag]

Sowas musst du sagen
Dann fällt mir da spontan keine Möglichkeit zu ein.

 

[Hendoul]

Was ist denn eigentlich der Unterschied zwischen grid und inline-grid? Inline macht einfach keine Block-Elemente und benötigt somit nur soviel Platz wie halt gebraucht wird?

 

[Bagbag]

Bei grid verhält sich das Element nach außen wie block (default von div), bei inline-grid verhält sich das Element nach außen wie inline (default von span).

 

[chris221177]

Wenn die Struktur nicht änderbar ist, wird die simpelste Methode ein javascript sein.