Из моего комментария и, возможно, не из тех ответов, которые вы ищете (я ждал обратной связи, поэтому я согласен с идеей ... слишком долго, чтобы быть просто комментарием) .
Когда вы запускаете ваш HTML без стиля, img и описание не совпадают.
Вы можете использовать figure и figcaption для описания содержимого и изображения ссылки с его описанием, достаточно img и description в одном и том же контейнере, div + a p тоже подойдет.
По умолчанию, они будут располагаться друг над другом, это то, что вы ожидаете, когда экран имеет ширину менее 900 пикселей. там делать нечего.
Тебе нужно иметь в виду, когда дело обстоит шире. Вот где полезен твой медиазапрос.
Вот демонстрация идеи кодирования:
/* commun style */
img {
box-sizing:border-box;
display:block;
width: 100%;
height: 100%;
object-fit: cover;
padding: 1em 1em 0 1em ;
}
figure figcaption{
display:block;
margin:0 1em;
background: wheat;
}
figure:nth-child(even) figcaption{
background:gray
}
/* reordering visual layout when window is wider than 900px */
@media only screen and (min-width: 901px) {
/* grid , what you want to use */
.container {
display:grid;
grid-template-columns:2fr 1fr;
}
/* not the best , we will try to make figure side by side looking like 2 rows .... */
figure {
display:flex;
flex-direction:column;
}
/* to fake the rows, trying to set heights each should fill */
img {
flex:10
}
/* works for about 2 1em lines, then visual breaks */
figcaption {
flex:1
}
/* use of supports in case browser is able to get rid of figure in the way for the grid sytem set on container, This your initial idea, to use the grid model for img and text and draw a grid with cell alignement */
@supports (display:contents) {
figure {
display:contents
}
img {
grid-row:1;
}
}
}
<div class="container">
<figure>
<img src="https://picsum.photos/id/600/600/300">
<figcaption>
This is the description for the first image<br>another line
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/id/600/601/300">
<figcaption>
This is the description for the second image
</figcaption>
</figure>
</div>
Иная структура и использование дисплея: содержание, безусловно, не то, что вы ожидали, я надеюсь, что это поможет вам узнать что-то вместо своего ответа. См. Ссылки на полезные ресурсы ниже.
Кодовая ручка для игры: https://codepen.io/gc-nomade/pen/EJBmee
о дисплее:
https://css -tricks.com / Get-готовые для дисплеев содержаний /
Проблема заключается в том, что единственный способ для элементов участвовать в одной и той же сетке CSS (или в этом отношении во флексбоксе) - это братья и сестры. Таким образом, в некоторых случаях мы можем быть вынуждены отказаться от семантики HTML в пользу макета (не очень).
Одним из ответов на этот вопрос является display: contents; - новое волшебное значение отображения, которое, по сути, делает контейнер исчезающим, превращая дочерние элементы дочерними для элемента на следующий уровень в DOM.
о figure:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Элемент HTML <figure> (рисунок с необязательной подписью) представляет собой автономный контент, возможно, с необязательной подписью, которая указывается с использованием элемента (<figcaption>). Фигура, ее подпись и ее содержание упоминаются как единое целое.
о @supports:
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
Правило @supports CSS позволяет указывать объявления, которые зависят от поддержки браузером одной или нескольких определенных функций CSS. Это называется запросом к функции. Правило может быть размещено на верхнем уровне вашего кода или вложено в любую другую условную группу at-rule .