Как в grid прижать все блоки к верху?

Question

[Odinokun]

Всем привет.
Есть такая структура сайта.
Блоки с надписью "Заголовок" и "Цена" могут быть самой разной высоты, так как в них на разных страницах выводится разная инфа.
Вопрос - как мне прижимать вверх блоки находящиеся под ними (в моем примере надо прижать блок "Доставка" к блоку "Цена")?

Answer 1

[approximate solution]

Все до банального просто, вам нужна доп обертка + добавить флексом для удобного растягивания.


Как работает:
wrapper: всегда высотой 100%, флекс контейнер
Доставка: flex-grow: 1, что растягивает её динамически.

Comments

[Odinokun]

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

[approximate solution]

Дмитрий,

На вас - протестировать на правильность работы

[Odinokun]

Например "Доставка" при адаптации должна втулиться между "Заголовкам" и "Выбором модели"

[approximate solution]

Дмитрий, Ну адаптацию я не делал, или вы хотите что бы я за вас все сверстал? Адаптацию делайте через медиазапросы.

[approximate solution]

Дмитрий, На определенном медиа - меняете areas, на те которые вам нужны, и по аналогии растягиваете rows с помощью 1fr

[Odinokun]

approximate solution, беда в том, что если в Ваш блок Zag добавить несколько строк текста, то он увеличится по высоте и соответственно потянется и блок Dostavka.
А надо, что бы доставка оставалась прежней высоты.

[approximate solution]

Дмитрий, Доставку можно растянуть до блока выше - добавим ему align-self: stretch;


Но к сожалению он зависим от контента, и если вы растягиваете блоки слева, то и потянется тот, который описан рядом в areas, в целом блоку i-3 тоэе можно добавить stretch, и он будет тянуться за соседом, не создавая разрыва

[Odinokun]

approximate solution, суть задачи, что бы в моем примере, при любой высоте блока "Заголовок", блок доставки всегда вплотную прилегал к блоку "Цена", и при этом высота блока с ценой не изменялась.
Как я понимаю, сделать это нереально, так как при этом нарушается горизонтальная линия сетки.