css: figure nimmt zuviel Platz ein
bearbeitet von marctrixHej 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:
>
> ~~~CSS
> .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:
~~~CSS
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](https://codepen.io/haunschild/pen/RymwPX).
Marc