CSS-Grid: How to align 2 left, one large in the middle and two right?

Question

I am struggling to get what I want and I am not sure if its even possible.

Tried everything I got, showing some code below

section {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

section > *{
    border: 1px solid red;
}

section > h1{
    grid-row: 1;
    grid-column: 2 / 3;
}

section > h2{
    grid-row: 2;
    grid-column: 2 / 3;
}

section > img{
    grid-row: 1/2;
    grid-column: 1 / 3;
    width: 20%;
}

section > span{
    grid-row: 1;
    grid-column: 3 / 3;
}

<div>
  <section>
    <h1>HEADING</h1>
    <img src=img.png alt="">
    <h2>HEADING 2</h2>
    <span>11:44</span>
  </section>
  <section>
    <h1>HEADING</h1>
    <img src=img.png alt="">
    <h2>HEADING 2</h2>
    <span>11:44</span>
  </section>
  ...
</div>

I want the image to appear left, using the upper and lower cell, so full height.

I want the h1 to use the upper center space.

I want the h2 to use the lower center space.

i want the span to use the upper right space.

The lower right space should be combined with the lowercenter in case the content of lowercenter overflows.

Answer 1

You were almost there but there were some issues.

You defined a four column grid but your description only requires three.

grid-template-columns: auto 1fr 1fr; /* (seems more appropriate) /*

* {
  margin: 0 !important;
}

section {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
}

section>* {
  border: 1px solid red;
}

section>h1 {
  grid-row: 1;
  grid-column: 2 / 3;
}

section>h2 {
  grid-row: 2;
  grid-column: 2 / 4;
  /* span 2 columns*/
}

section>img {
  grid-row: 1 / 3;
  /* span 2 rows */
}

section>span {
  grid-row: 1;
}

<section>
  <h1>HEADING</h1>
  <img src="https://placekitten.com/200/200" alt="">
  <h2>HEADING 2</h2>
  <span>11:44</span>
</section>

I want the h2 to use the lower center space.

I want the span to use the upper right space.

The lower right space should be combined with the lowercenter in case the content of lowercenter overflows.

The h2 area is supposed to span 2 columns so we extend it out into column 3.