Я хочу, чтобы изображение было слева, а содержимое (заголовок над мета, мета над текстом) справа (стиль списка блогов).
Я не могу изменить структуру 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>
Вам нужно определить сетку. и скажите элементу стоять в каком столбце:
пример
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>
Как только вы создадите настоящую сетку, вы можете разместить все эти элементы в ней, где захотите.