Как расположить элементы grid по линии. Подробнее на скриншотах

Question

Первый скрин как это выглядит у меня:

Второй как это должно выглядеть на самом деле:

Проблема в том, что контент разный и поэтому всё идет неправильно(не по линии)

.services{
    
    &__content{
        text-align: center;

        &-title{
            color: $black;
            font-weight: 700;
            font-size: 36px;
            line-height: 56px;
            margin-bottom: 26px;
        }
        &-line{
            max-width: 56px;
            height: 2px;
            background: $black;
            border-radius: 5px;
            margin: 0 auto;
            margin-bottom: 33px;
        }
        &-text{
            color: $lightGray;
            font-weight: 300;
            font-size: 18px;
            line-height: 30px;
            max-width: 952px;
            margin: 0 auto;
            margin-bottom: 80px;
        }
        &-cards{
            display: grid;
            justify-content: center;
            grid-template-columns: auto auto auto;
            grid-column-gap: 35px;
            grid-row-gap: 37px;

            &-card{
                box-shadow: 10px 40px 50px rgba(229, 233, 246, 0.4);
                border-radius: 20px;
                text-align: left;
                max-width: 350px;
                padding: 47px 39px;
                img{
                    margin-bottom: 22px;
                }
                h3{
                    color: $black;
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 56px;
                }
                p{
                    color: $lightGray;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 28px;
                }
            }
        }
    }
}

<section class="services">
    <div class="container">
        <div class="services__content">
            <div class="services__content-title">Our services</div>
            <div class="services__content-line"></div>
            <div class="services__content-text">We provide to you the best choiches for you. Adjust it to your health needs and make sure your undergo treatment with our highly qualified doctors you can consult with us which type of service is suitable for your health</div>
            <div class="services__content-cards">
                <div class="services__content-cards-card">
                    <img src="../img/grid_1.svg" alt="search">
                    <h3>Search doctor</h3>
                    <p>Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
                </div>
                <div class="services__content-cards-card">
                    <img src="../img/grid_2.svg" alt="search">
                    <h3>Online pharmacy</h3>
                    <p>Buy  your medicines with our mobile application with a simple delivery system</p>
                </div>
                <div class="services__content-cards-card">
                    <img src="../img/grid_3.svg" alt="search">
                    <h3>Consultation</h3>
                    <p>Free consultation with our trusted doctors and get the best recomendations</p>
                </div>
                <div class="services__content-cards-card">
                    <img src="../img/grid_4.svg" alt="search">
                    <h3>Details info</h3>
                    <p>Free consultation with our trusted doctors and get the best recomendations</p>
                </div>
                <div class="services__content-cards-card">
                    <img src="../img/grid_5.svg" alt="search">
                    <h3>Emergency care</h3>
                    <p>You can get 24/7 urgent care for yourself or your children and your
                        lovely family</p>
                </div>
                <div class="services__content-cards-card">
                    <img src="../img/grid_6.svg" alt="search">
                    <h3>Tracking</h3>
                    <p>Track and save your medical history and health data </p>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

Оберните картинки в блок с классом, например card-image-box и в стилях установите ему фиксированную высоту

<div class="services__content-cards-card">
  <div class="card-image-box"
    <img src="../img/grid_3.svg" alt="search">
  </div>
  <h3>Consultation</h3>
  <p>Free consultation with our trusted doctors and get the best 
 recomendations</p>
</div>

css

.card-image-box {
  height: 200px
}

БЛОГ НА HUSL

Как расположить элементы grid по линии. Подробнее на скриншотах

Ответы (1 шт):