Trying to get a structure to work with CSS grid

Question

I want the image on the left, but the content (title above meta, meta above text) on the right (blog list style).

I can't change the HTML structure so what can I do here with CSS grid?

<article>

<img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">

<h2 >Golden Meadow</h2>

<p>by <span>Jack</span> in <span>News</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc aliquam justo et nibh venenatis aliquet. 
Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>

</article>

https://jsfiddle.net/ch9n26sz/

Answer 1

You need to define a grid. and tell element to stand in which column:

example

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

:not(img) {
  grid-column: 2;
  /* other style */
  padding:0.25rem;
  /* ... */
}

<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

as for a reminder or a tutorial https://css-tricks.com/snippets/css/complete-guide-grid/

image can also be spanning a few rows and be align within

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

img {
  grid-row: span 5;/* amount of rows to span */
  margin: auto 0.5em;/* align-self can also be used read the tutorials */
}

<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>