Überschrift positionieren

[Rolf B]

Hallo Wishpacker,

auto auto auf 5fr 95fr geändert um Titel und Beschreibung näher ans Bild zu bekommen. Aber ich glaube, das ist nicht die perfekte Lösung.

Das siehst Du richtig. Das Bild hat ja eine feste Breite und der Text füllt den Rest. Das muss sich im column-Template wiederfinden.

Nimm grid-template-columns: 75px 1fr;.

75px deshalb, weil dein Bild 75px hat. Du kannst auch eine andere Angabe machen, um das Bild in anderer Größe darzustellen, z.B. 3em. Dann skaliert das Bild mit der vom Benutzer gewählten Schriftvergrößerung; du musst dem img Element dann aber noch width:100% geben. Ein column-gap wäre auch noch gut im Grid, um etwas Abstand zwischen Bild und Text zu schaffen, z.B. 0.5em.

das Grid nur so Breit ist wie der Inhalt

Alternative A: grid-template-columns: 75px max-content;. Das div Element füllt immer noch die ganze Breite (gib ihm eine Hintergrundfarbe, um das zu zeigen), aber die Grid-Spalten sind nur noch links.

Alternative B: lass die Textspalte auf 1fr, aber gib dem div noch width: max-content;. Dann wird das ganze div schmaler.

Und wie ich schon schrub - das div möchte eher was anders sein. Semantisches Markup ist heutzutage angesagt, ein div ist oftmals lieber ein header, footer, nav, section, article oder aside. Oder auch figure oder blockquote. Manchmal ist ein div einfach nur ein div. Aber nur manchmal.

Schrieb ich schon 2017...

Rolf