Как сверстать правильно?

Question

[dmitriu256]

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

Начальные требования
1) Карточки должны быть одинаковой высоты независимо от содержания
2) Должны иметь одинаковый margin-bottom
3) Последний блок должен иметь margin-bottom: 0 при адаптивности

Результат что имею на данный момент


Верстка карточки Вариант1

<div class="col-12 col-sm-6 col-md-4 col-lg-3 ">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/prepay.png" alt="Предоплата за товар">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Предоплата за товар
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Перечисляете предоплату удобным для Вас способом
                    </p>
                    <!-- /.schema-block__descr -->
                </div>
                <!-- /.schema-block -->
            </div>

Верстка карточки Вариант2

<div class="col-12 col-sm-6 col-md-4 col-lg-3 schema-block">

                    <div class="schema-block__img">
                        <img src="img/schema/check.png" alt="Проверка товара">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Проверка товара
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Наши специалисты проверяют на заводе производителя товар
                    </p>
                    <!-- /.schema-block__descr -->
            </div>

Стили (sass)

.col-3
  border: 1px solid red
.schema
  background: $section-bg-light
  &-title
    margin-bottom: 16px
  &-block
    margin-bottom: 30px
    border: 1px solid blue
    text-align: center
    &__img
      margin-bottom: 10px
      min-height: 65px
    &__title
      margin-bottom: 10px
      font-size: 16px
      font-weight: 700
      color: $active-color
    &__descr
      font-weight: 300

Вопрос по какому из описанных мною вариантов лучше сверстать такие блоки?
Постоянно возникает такой вопрос при версте подобных блоков

В варианте2 легко убрать отступ у последнего блока (при адаптиве) прописав
.schema-block:last-child {margin-bottom: 0} в отличии от Варианта1
Где свойство last-child не работает, тк блок schema-block один в рамках класса col-3

Полный код двух вариантов

<div class="row">

            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="schema-block">
                        <div class="schema-block__img">
                            <img src="img/schema/application.png" alt="Заявка">
                        </div>
                        <!-- /.schema-block__img -->

                        <h3 class="schema-block__title">
                            Заявка
                        </h3>
                        <!-- /.schema-block__title -->

                        <p class="schema-block__descr">
                            Вы оставляете заявку на сайте или звоните нам
                        </p>
                        <!-- /.schema-block__descr -->
                    </div>
                    <!-- /.schema-block -->

            </div>
            <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/selection.png" alt="Подбор производителя">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Подбор производителя
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Вы отправляете нам образец Вашего товара
                        Вы отправляете нам образец Вашего товара
                        Вы отправляете нам образец Вашего товара
                    </p>
                    <!-- /.schema-block__descr -->
                </div>
                <!-- /.schema-block -->

            </div>
        <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3 ">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/contract.png" alt="Заключение договора">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Заключение договора
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Заключаем профессионально подготовленный договор
                    </p>
                    <!-- /.schema-block__descr -->
                </div>
                <!-- /.schema-block -->

            </div>
        <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/prepay.png" alt="Предоплата за товар">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Предоплата за товар
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Перечисляете предоплату удобным для Вас способом
                    </p>
                    <!-- /.schema-block__descr -->
                </div>
                <!-- /.schema-block -->

            </div>
            <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3 schema-block">

                    <div class="schema-block__img">
                        <img src="img/schema/check.png" alt="Проверка товара">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Проверка товара
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Наши специалисты проверяют на заводе производителя товар
                    </p>
                    <!-- /.schema-block__descr -->
            </div>
            <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3 schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/pay.png" alt="Полная оплата и страхование">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Полная оплата и страхование
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Производите полную оплату и страховку Вашего заказа
                    </p>
                    <!-- /.schema-block__descr -->
            </div>
            <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3 schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/send.png" alt="Отправка товара">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Отправка товара
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Мы отправляем товар выбранным Вами способом
                    </p>
                    <!-- /.schema-block__descr -->
            </div>
            <!-- /.schema-block -->

            <div class="col-12 col-sm-6 col-md-4 col-lg-3 schema-block">

                    <div class="schema-block__img">
                        <img src="img/schema/tracking.png" alt="Отслеживание груза">
                    </div>
                    <!-- /.schema-block__img -->

                    <h3 class="schema-block__title">
                        Отслеживание груза
                    </h3>
                    <!-- /.schema-block__title -->

                    <p class="schema-block__descr">
                        Вы всегда видите где находится в данный момент Ваш груз
                    </p>
                    <!-- /.schema-block__descr -->
            </div>
            <!-- /.schema-block -->

        </div>

Какой вариант верстки лучше 1 или 2?

Comments

[iBird Rose]

а в чем проблема убрать у последнего col-3?
.col-3:last-child .schema-block {margin-bottom: 0}

p.s. чтобы прям вообще универсально - можешь использовать [class^='col-']

[class^='col-']:last-child .schema-block {margin-bottom: 0}

[dmitriu256]

iBird Rose, а какой вариант верстки лучше выбрать 1 или 2? Как правильнее?

Answer 1

[Арсений Матыцин]

Адаптивность в bootstap достигается добавлением ключа медиазапроса, например col-md-3. Сейчас я вижу правило col-3, а оно работает для абсолютно всех разрешений. По тому же принципу делаются и отступы mb-md-[n].

Колонки, которые находятся внутри .row по умолчанию имеют размер на всю высоту, это свойства flex. Собсно, углубись в матчасть, чтобы понимать, как это работает. Row → родитель, col- → ребенок flex-а.

PS: если ты задашь schema-block, который находится внутри col, то получишь почти такую же верстку, как и во втором варианте + отступы слева и справа, которые формируются стилями bootstrap.

Comments

[dmitriu256]

Арсений Матыцин, просто не дополнил верстку данными классами(верстку исправил), я имел ввиду другое
как убрать margin-bottom у последней колонки на расширениях (col-12)
Когда карточки идут она под другой занимая все 12 колонок, но у последней остается заданный margin-bottom
Как пытался решить:
Вариант 1 (где schema-block лежит в col-12 col-sm-6...)
.schema-block:last-child{margin-bottom: 0}
Применяется в окружении колонки col-12 col-sm-6, но не распространяется на все классы .schema-block *(только в рамках одной колонки)- проблема последней колонки остается.

Вариант 2, когда schema-block (находиться на уровне col-12 col-sm-6...) срабатывает свойство
.schema-block:last-child{margin-bottom: 0} - успешно срабатывает

Естественно свойство .schema-block:last-child записываю в медиа запросах media (max-width: 576px)
Интересует именно как лучше со стороны верстки семантически 1 или 2 вариант карточки.