Überschrift positionieren
bearbeitet von
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.
_Rolf_
--
sumpsi - posui - obstruxi
Überschrift positionieren
bearbeitet von
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.
Nein. 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.
_Rolf_
--
sumpsi - posui - obstruxi