Anordnung einiger Elemente im Grid

[Matthias Scharwies]

Servus!

Als Diskussionsgrundlage dient der Anhang.

Zum Problem: Ich habe hier ein Gridmodell. Das letzte Gridelement ist unten und geht über die ganze Seite.

ok, also so:

.fullwidth {
  grid-column: 1 / -1;
}

Siehe: CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#negative_Werte

Hier möchte ich, wie dargestellt, etwas weiter links vom Rand ein Foto haben und rechts neben dem Foto, soll die Beschreibung stehen. Dazu soll das Foto umrandet sein und rechts der Text soll die gleiche Größe der Umrandung haben, wie das Foto.

Ich stelle mir jetzt ein solches HTML vor:

<figure>
  <img src="" alt="">
  <figcaption>Beschreibung</figcaption>
</figure>

Mit CSS bringst du die beiden Kindelemente in ein Grid (Achtung: ein neues Grid, nicht das Grid in dem das figure drin ist!):

figure {
  diplay: grid;
 grid-template-columns: 1fr 1fr;
}

figure > img,
figure >figcaption {
  border: thin solid;
}

figure > img {
    margin-left: 2em;
}

figure > figcaption {
    align-self: center;
}

Damit erzeugst du 2 Spalten. Das Grid ist so hoch wie das Bild. Eigentlich ist die zweite Rasterzelle auch so hoch wie das Bild. Durch align-self: center; wird die Bildunterschrift aber vertikal zentriert. Wenn du das nicht willst, lass' align-self weg oder setze es auf stretch.

Schau mal hier: Beispiel:CSS-grid-ausrichtung-5.html

Sobald ich aber ein weiteres Foto unter dem ersten Foto haben möchte, dann wird das erste Textfeld ganz woanders angezeigt. Weiterhin habe ich keine Kontrolle, ob die Bildelemente nebeneinander oder untereinander angeordnet werden.

Passt, oder?

Herzliche Grüße

Matthias Scharwies