Как правильно поместить блок текста в сетке грид?

Question

[godsplan]

https://codepen.io/poylar/pen/wvovEGR
До этого я задавал flex block-item, но он не подходит, так как если текст будет в две строки то вся сетка будет съезжать. Как правильно расположить эту сетку чтобы текст снизу не загораживался?

Comments

[Ankhena]

Гриды тут вообще мало погоды делают.
Вы picture сказали растянуться на всю высоту родителя. А потом еще ниже написали текст, вот он и вывалился.

Определитесь как это всё таки должно располагаться и задайте соответственно размеры. Только аккуратно с процентной высотой, браузер должен знать от чего считать %.

[godsplan]

Ankhena, да я понимаю, но если задавать флекс то все вмещается, а задавать фикс размер высоты картинки я не хочу, какие есть еще решения?

[Ankhena]

godsplane, если флексогм вам нравится, то в чем проблема?

Если гридами, можно, например, задавать пропорции блоку с картинкой, а не высоту.
Либо и карточке задать грид.

[godsplan]

Ankhena, ну может я что то не так делаю но если я умещаю все флексом, то при двухстрочном заголовке грид сетка едет, один элемент больше другого становится где в заголовке две строки, если карточке задавать грид то результат тот же.

[Ankhena]

godsplane, тут https://jsfiddle.net/dj895sa4/ видно, что все элементы имеют одинаковую высоту, хотя "Альпийская горка" и " Ландшафтный дизайн дачи" написаны в 2 строки. Т.е. грид сетка никуда не едет. Уменьшилась картинка.

Чтобы картинки оставались одинаковыми, нужно чтобы высота их обертки была пропорциональна ширине (нужные вам пропорции). Хаком с паддингами.
Тогда свободное место, в блоках с заголовками в одну строку, будет белым.

[godsplan]

Ankhena, есть какой то пример как это сделать?Я не особо понимаю что за хак с паддингами.

[Ankhena]

godsplane, https://jsfiddle.net/Ankhena/cLhxv7eq/

[Ankhena]

godsplane, Как сделать идеальный квадрат задав только размер одной стороне блока?