css: figure nimmt zuviel Platz ein

[MrMurphy1]

Hallo

Habe gerade keine Zeit das zu machen, dürfte aber deutlich weniger Code benötigen

Das vermag ich nicht zu erkennen. Für die Anordnung im umgebenden Container (figure) von img und figcaption verwende ich zur Zeit 4 CSS-Anweisungen:

.grafiken figure {
   position: relative;
}
.grafiken figcaption {
   position: absolute;
   bottom: 0;
   width: 100%;
}

Das restliche CSS hat damit nichts zu tun, sondern erfüllt andere Aufgaben.

Mit CSS-Grid wird das CSS viel aufwändiger.

Zunächst muss in figure das Grid erstellt werden.

Dann muss figure dort eingefügt werden.

Dann muss figcaption dort eingefügt werden.

Ist das erledigt tauchen zwei zusätzliche Probleme auf:

1. Die untere Zelle nimmt die Hälfte der Höhe vom Grid ein, muss also noch so weit wie möglich nach unten geschoben werden. Dabei darf der Text auch bei unterschiedlicher Zeilenanzahl (Höhe) nicht nach unten aus dem Grid geschoben werden.

2. In der Realität wird in figcaption kaum Inhalt wie "Test 1", "Test 2" und so weiter stehen.

In meinem Beispiel ich ich deshalb zu einem Bild einen längeren Text mit Zeilenumbruch eingefügt. So ein Zweizeiler wird sich bei vielen Bildern in der Praxis kaum vermeiden lassen. Bei der Darstellung mit CSS-Grid erfolgt aber kein Zeilenumbruch, so dass der Text nach rechts aus dem Grid herausragt. Dies müsste auch noch unterbunden werden.

Meine Kenntnisse mit CSS-Grid sind nicht so ausgereift, dass mir dazu Lösungen einfallen. In jedem Fall ist dazu aber zusätzliches CSS erforderlich.

Ich lasse mich gerne überraschen, aber eine Lösung mit CSS-Grid zur Anordnung von img und figcaption (und genau darum geht es bei Pits Frage) erscheint mir deutlich aufwändiger als die bisherigen 4 CSS-Anweisungen.

Die Anordnung der figure-Elemente mit Flexbox kann natürlich durch CSS-Grid ersetzt werden. Das ist aber ein anderes Feld und hat aber mit Pits ursprünglicher Frage nichts zu tun.

Gruss

MrMurphy