Как выровнять содержимое CSS-карт по вертикали

Question

Я работаю в интернет-магазине. У нас есть некоторые образцы продуктов:

Проблема в том, что кнопка «Добавить в корзину» всегда находится на разной высоте. Кнопка всегда должна быть на 30 пикселей выше нижнего - независимо от того, сколько контента.

Если вы хотите проверить его в Интернете: Ссылка на страницу в разработке

Я имеюпытался использовать Flex-box с разными значениями, но я застрял сейчас.

Answer 1

Заполнение (или поле) и CSS-сетка - это то, что вам нужно.

У меня похожий дизайн на моем веб-сайте для карточек материалов, которые я создал:

Взгляните, например, на строку № 2. Я добавил больше контента на левую карточку, но все оставалось выровненным с содержанием правой карточки.

Весь этот макет состоит из сеток внутри сеток. У вас есть внешняя сетка в вашем примере;все, что вам нужно сделать, это также сделать сами сетки.

Вот как это выглядит, когда вы проверяете это:

А вот что вы хотите на своем сайте для карточек:

display: grid;
grid-template-rows: 1fr max-content;

До:

После:

Добавление поля к нижней части кнопок здесь тривиально:

margin-bottom: 30px;
justify-self: center;

Вы можете использовать аналогичную стратегию для выравнивания цен, отделяя их от контейнера, чтобы они находились в еще одном ряду (в настоящее время ваши карты имеют только две «строки»):

Игнорируйте третью и четвертую карты и посмотрите только на две левые;оба они имеют три ряда. Первая строка - это содержимое, вторая строка - цена, а третья строка - кнопка. Измените свои карты на:

display: grid;
grid-template-columns: 1fr max-content max-content;

И, конечно, вам нужно будет переместить цену span, чтобы она располагалась прямо над кнопкой в ​​документе: