Попытка заставить структуру работать с сеткой CSS

Question

Мне нужно изображение слева, а содержание (заголовок над метой, мета над текстом) справа (стиль списка блогов).

Я не могу изменить структуру HTML, так что я могу сделать здесь с сеткой CSS?

<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

Вам нужно определить сетку. и указать элементу, в каком столбце стоять:

пример

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>

как для напоминания или учебника https://css -tricks.com / snippets / css / complete-guide-grid /

изображение также может занимать несколько строк и быть выровненным в пределах

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>