Как обеспечить единообразный макет карточки товара с минимальной высотой и адаптивным дизайном? ⇐ CSS

[Anonymous]

Я работаю над макетом карточки товара для страницы покупок. На странице карточки будут отображаться в виде сетки с несколькими строками и столбцами. Моя цель — обеспечить, чтобы все карточки товаров выглядели единообразными и сбалансированными, независимо от длины их контента. Вот чего я хочу добиться:
1. Контейнер изображения должен занимать 65 % высоты родительского контейнера.< /p>
2. Контейнер содержимого должен занимать 35 % высоты родительского контейнера.
3- Все карточки должны иметь одинаковую высоту, установив минимальную высоту. в родительском контейнере.
4. Макет должен быть адаптивным с двумя столбцами на экранах мобильных устройств.
Проблема:
Я столкнулся со следующими проблемами:
1. Когда я использую flex: 0 0 65% для контейнер изображения и flex: 0 0 35% для контейнера содержимого, Размер контейнера изображения по умолчанию не равен 65 % от родительского контейнера, как ожидалось.
2. Если я добавляю контент (например, lorem * 35) в контейнер изображения, его размер увеличивается из-за содержимого, а не из-за размера контейнера изображения.
3. Если я использую flex : 1 0 65% для контейнер изображения и flex: 0 0 35% для контейнера контента, размер изображения увеличивается, но размер контейнера контента не остается на уровне 35%.

Код: Выделить всё

Add to cart

Код: Выделить всё

.feature-item-img-container {
flex: 1 0 65%; /* Child1 takes 65% of the height, effectively flex-grow 3 */
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
cursor: pointer;
background-color: #FFDF00;
position: relative;

}

.limited-img-two {

flex: 1;
width: 100%;
height: 100%;
object-fit:  cover;
transition: opacity 0.3s ease-in;

background-size: cover; /* Ensure the image covers the entire div */
background-position: center; /* Center the image within the div */
background-repeat: no-repeat; /* Prevent repeating of the image */
/* position: relative; */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}

.limited-item-details-container {
flex: 1 0  35%;
background-color: aliceblue;

}

В чем мне нужна помощь:
1. Как обеспечить безопасность контейнера изображений > и контейнер содержимого** занимают ровно 65% и 35% высоты родительского контейнера при соблюдении минимальной высоты?
2- Почему для изображения используется flex: 1 0 65% контейнер приводит к увеличению размера изображения, но размер контента не может оставаться на уровне 35 %?
3. Какие лучшие практики разработчики используют сегодня для создания единых сеток карточек товаров?
4. Существуют ли рекомендуемые ресурсы или веб-сайты с бесплатным исходным кодом, где можно найти повторно используемые компоненты для сеток карточек товаров?>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ive-design