0

Всем привет, подскажите пожалуйста, я делаю грид сетку, и у меня не работает row-gap, хотя в прошлых моих проектах это свойство работало на сетку корректно, подскажите пожалуйста, что я делаю не так? Сейчас я работаю на препроцессорах SCSS, до этого был чистый CSS. На скрине видно, что row-gap никак не задает пробелы между строками грид сетки

<section class="section benefits">
            <div class="container">
                <h2 class="title benefits__title">Преимущества</h2>
                <div class="content benefits__wrapper">
                    <div class="benefits__row benefits__row-first">
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-first-1.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Интеллектуальные режимы</h3>
                                <p class="p benefits__text">Mavic 2 унаследовал 6 стандартных режимов интеллектуальной съемки QuickShot:Roket/Dronie/Circle/Helix/Boome
                                    rang/Asteroid.</p>
                            </div>
                        </div>
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-first-2.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Active Track 2.0</h3>
                                <p class="p benefits__text">Усовершенствованный режим второго поколения распознаёт и отслеживает объекты ещё точнее, быстрее и умнее.</p>
                            </div>
                        </div>
                    </div>
                    <div class="benefits__row benefits__row-first">
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-second-1.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Панорамная съемка</h3>
                                <p class="p benefits__text">Mavic 2 поддерживает 4 режима 
                                    панорамной съёмки: сферическая,
                                    180 градусов,
                                    горизонтальная, вертикальная</p>
                            </div>
                        </div>
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-second-2.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Крутая камера!</h3>
                                <p class="p benefits__text">Технология Hyperlapse в четырёх режимах исполнения.
                                    Улучшенный фото режим HDR
                                    Функция HyperLight для съёмки в условиях слабого освещения
                                    4К съёмка
                                    </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
.benefits {
    &__title {
        margin-bottom: 65px;
    }
    &__wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 65px;
    }
    &__row-title {
        @extend %ubuntu-bold;
        font-size: 21px;
        line-height: normal;
        margin-bottom: 10px;
    }
    &__text {
        font-size: 15px;
        line-height: 130%;
        max-width: 300px;
    }
    &__row-section {
        display: flex;
        gap: 30px;
        align-items: center;
    }
}

введите сюда описание изображения

5
  • Может у вас картинка выходит за пределы строки? 3 июл в 18:35
  • Нет, она в диве, который align-items: center 3 июл в 18:40
  • Вы просто задаёте row-gap не тем элементам. 4 июл в 4:45
  • benefits__row должен принимать row-gap если хотите, что бы верхний от нижнего отклеился. 4 июл в 4:47
  • У вас benefits__wrapper в себе содержит зачем-то два элемента, когда он должен в себе содержать 4 элемента. "grid-template-rows: 1fr 1fr;" - вообще не нужен. 4 июл в 4:49

1 ответ 1

2

Вот эта обёртка лишняя - <div class="benefits__row benefits__row-first">
Также не нужен - grid-template-rows: 1fr 1fr;
Вместо row-gap я использовал просто gap, чтобы отступы сделать не только по высоте, но и между блоками по ширине.

.benefits__title {
    margin-bottom: 65px;
}
.benefits__wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 65px;
    }

.benefits__row-title {
        @extend %ubuntu-bold;
        font-size: 21px;
        line-height: normal;
        margin-bottom: 10px;
    }
.benefits__text {
        font-size: 15px;
        line-height: 130%;
        max-width: 300px;
    }
.benefits__row-section {
        display: flex;
        gap: 30px;
        align-items: center;
        border: 1px solid;
    }
<section class="section benefits">
            <div class="container">
                <h2 class="title benefits__title">Преимущества</h2>
                <div class="content benefits__wrapper">
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-first-1.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Интеллектуальные режимы</h3>
                                <p class="p benefits__text">Mavic 2 унаследовал 6 стандартных режимов интеллектуальной съемки QuickShot:Roket/Dronie/Circle/Helix/Boome
                                    rang/Asteroid.</p>
                            </div>
                        </div>
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-first-2.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Active Track 2.0</h3>
                                <p class="p benefits__text">Усовершенствованный режим второго поколения распознаёт и отслеживает объекты ещё точнее, быстрее и умнее.</p>
                            </div>
                        </div>
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-second-1.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Панорамная съемка</h3>
                                <p class="p benefits__text">Mavic 2 поддерживает 4 режима 
                                    панорамной съёмки: сферическая,
                                    180 градусов,
                                    горизонтальная, вертикальная</p>
                            </div>
                        </div>
                        <div class="benefits__row-section">
                            <div class="benefits__row-section-flex">
                                <img src="images/benefits__row-second-2.jpg" alt="">
                            </div>
                            <div class="benefits__row-section-flex">
                                <h3 class="benefits__row-title">Крутая камера!</h3>
                                <p class="p benefits__text">Технология Hyperlapse в четырёх режимах исполнения.
                                    Улучшенный фото режим HDR
                                    Функция HyperLight для съёмки в условиях слабого освещения
                                    4К съёмка
                                    </p>
                            </div>
                        </div>
                </div>
            </div>
        </section>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.