Такие вещи верстаются через присвоение одинакового размера всем элементам внутри карточки. Пусть card - это наша карточка, row-card - это ряд карточек. Внутри card пусть будут элементы image - картинка, title - название, text - текст, button - кнопка действия. Тогда:
Структура карточки:
.row-card
.card {
image
title
text
button
}
.card.....
Стили:
.row-card {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between; }
.card {
display: flex;
flex-direction: column;
align-items: flex-start; /**или center*/
justify-content: flex-start; /**это важно, чтобы все содержимое */
/**карточки выравнивалось одинаково*/
width: 150px; /**или какое по макету*/
padding: 10px; /**или что там по макету, если картинка должна быть во всю */
/**ширину без отступов от краев карточки,*/
/** то это свойство прописывается у title, text*/
border: 1px solid #000;
margin-right: 15px; /**чтобы карточки друг к другу не липли*/
margin-bottom: 15px; /**чтобы ряды карточке друг к другу не липли*/
}
.card .image {
width: 100%;
height: 150px; /**или то которое по макету*/
object-fit: cover;}
.card .title {
width: 100%;
text-align: center;
font-size: 20px; /**или сколько по макету*/
line-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
height: 25px; /**присвоение четкой высоты - это залог одинаковых карточек*/
overflow: hidden; /**чтобы скрыть текст, который не влезает*/ }
.card .text {
width: 100%;
font-size: 16px; /**или сколько по макету*/
line-height: 18px;
margin-bottom: 10px;
height: 100px; /**присвоение четкой высоты - это залог одинаковых карточек*/
overflow: hidden; /**чтобы скрыть текст, который не влезает*/ }
.card .button {
height: 25px; /**присвоение четкой высоты - это залог одинаковых карточке*/
font-size: 14px;
line-height: 18px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
border: 1px solid inherit;
background-color: #000;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;}
