css: figure nimmt zuviel Platz ein

[marctrix]

Hej MrMurphy1,

Hallo

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

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%;
}

Da ist die Grid-Lösung tatsächlich etwas länger, eine Zeile um genau zu sein:

figure {
  display: grid;
}
img {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
figcaption {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

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

Naja…

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:

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.

Da unterschätzt du grid… 😉

Hier ein Link zu einem Beispiel für figure, img und figcaption-Positionierung mit CSS Grid.

Was ich von der Grid-Lösung erhofft hätte: der Text wird niemals das gesamte Bild überblenden, egal wie lang der werden mag.

Stimmt aber nicht. Wenn @Gunnar Bittersmann das erklären könnte, würde ich mich freuen. Ich dachte das Bild ist in Zeile eins und zwei, der Text nur in Zeile zwei und er dürfte daher nie über das gesamte Grid gehen?!?

Marc