Überschrift positionieren

[Rolf B]

Hallo Rolf,

also so:

<section class="blog">
  <header>
    <img src="/Joomla/images/kategoriebilder/howto.png">
    <h2>HowTo</h2>
    <p>Other HowTo's</p>
  </header>
  ...
</section>

mit diesem CSS

.blog header {
    display: grid;
    grid-template-columns: max-content auto;
    grid-template-rows: 0.5em repeat(3,auto);
    column-gap: 1em;
}

.blog header img {
  grid-area: 1 / 1 / span 4 / span 1;
}
.blog header h2 {
  grid-area: 2 / 2;
}
.blog header p {
  grid-area: 3 / 2;
}
.blog header h2, .blog header p  {
    grid-column: 2;
    margin: 0;
}

• grid-template-columns mit min-content oder max-content erspart Dir width:fit-content. Ob min- oder max-content ist für ein img egal.
• grid-template-rows mit 4 Zeilen, um eine Leerzelle über und unter den h2 und p Elementen zu erhalten. Dadurch kann man sie vertikal nach Wunsch positionieren
• Das Bild überspannt 4 Zeilen in Spalte 1 und bestimmt damit die Höhe des Grid. Die Eigenschaft grid-area in der Version mit 4 Werten legt Startzeile / Startspalte / Endezeile / Endespalte fest. Statt einer Endezeile oder -spalte kann man auch einen span angeben. Man kann (etwas ungenau beschrieben) auch einen oder beide Endewerte weglassen, dann nimmt der Browser "auto" dafür an. Wenn Du es exakt wissen willst, schau in die Grid Layout Spezifikation; unser Wiki ist da auch nicht ganz komplett.
• Beachte bei grid-row und grid-column, dass die Zahlenwerte dort nicht die Zeilen und Spaltennummern angeben, sondern die Grid-Line. Grid-Lines sind die gedachten Trennlinien vor, zwischen und hinter den Spalten. Beim Start ist das wurscht, weil die vertikale Grid-Line X links von Spalte X ist. Aber wenn sagst: grid-row: 2 / 4;, dann geht das Element nicht von Spalte 2 bis 4, sondern von Grid-Line 2 bis 4. Und das ist Spalte 2 bis 3.

Rolf