Как можно переделать раздел с работами?

Question

[Иван]

Сверстал это всё таким образом
Вот как выглядит это в макете
Отправил на проверку, но прислали вот такое замечание:

Как-то странно сделан раздел с работам, все
элементы в одной колонке и по левому краю с пустотами по бокам.

Не совсем понимаю, как это можно сделать по другому. Я указал контейнер на всю ширину экрана, при уменьшении экрана картинка переходит на следующую строку, если экран больше чем ширина экрана на макете, то картинки разумеется встают не ровно в 2 полных ряда, а в 2 неполных ряда. Что я делаю не так?

Answer 1

[Сергей delphinpro]

делаем ряды, которые переключаются следующим образом:

6x2
4x3
3x4
2x6

в промежутках ячейки пропорционально изменяют размеры для заполнения всей полосы.

Получаем всегда заполненные полностью ряды. С одним примечанием, что кол-во работ должно быть кратным 12-и.

Но вообще-то этот вопрос следовало задать тому, кому вы делаете этот макет. Кто знает, что у него на уме.

Answer 2

[Александр Логинов-Солоницын]

В общем вот моё решение https://codepen.io/login2030/pen/PoYjqRR?editors=1100
Что получается - убираем атрибуты бутстрапа со списка,

.container-fluid
        .row
            .col-lg-12.no-padding

Оставляем просто див.

Дополнительно оборачиваем картинку внутри элемента списка в див, чтобы адекватно считала пропорция.

Ну и css хак

.our-works__list-examples li img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}
.our-works__list-examples li div {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 100%;
}
.our-works__list-examples li {
  width: 10%;
}

Если хочешь изменить число работ в ряду, то просто 100% дели на желаемое количество работ и получишь ровный ряд. Например 100 / 8 = 12.5% будет ширина li