Снова спрашиваю) как делать такие блоки элементы с картинками?

Question

[Илья Пирожок]

Как делается такой блок контейнер с элементами внутри? Это вводит меня в заблуждение. В гугле ничего не нашел.
Можете на моем коде показать как это делается?

И скрин нужного результата

Comments

[Илья Пирожок]

Ссылка на код codepen.io/anon/pen/rxmrXe

Answer 1

[Mipko]

codepen.io/anon/pen/qbmMbP

Comments

[Илья Пирожок]

Решение очень классное, а вот при ресайзе окна как уменьшать их величину?

[Алексей Струков]

kamikadze1996: у Вас там странная ширина контейнера в 1000px.
Поставьте 100% и элементы будут уменьшаться

[Mipko]

если я правильно понял, то нужно убрать фиксированную ширину у родительского элемента(.container)
codepen.io/anon/pen/qbmMbP

[Илья Пирожок]

Мужики вы в какой школе волшебства учились?? огромное спасибо. И доп. вопрос а сейчас вообще делают сайты чисто на %(отзывчивыми), или все на бутрстрапе?

[Алексей Струков]

kamikadze1996: делают по разному )
и с бутстрапом и без него можно сделать "отзывчивость"
поставив ширину контейнера 100% мы сделали его отзывчивым по сути)

[Илья Пирожок]

Алексей Струков: Понял. Я почти во всех заказах использую сетку бутстрапа, а вот если макет = 906px то его нужно перевести в % для отзывчивости, там вроде формула есть для перевода?

[Алексей Струков]

kamikadze1996: Про макеты не скажу точно, но вообще лучше чтоб он был стандартного размера (типа 960 или другого числа которое делится ровно на 2, 3, 4, 5 хотя бы). Ну а формула простая - ширину делим на 100 и узнаем размер одного процента.

[Илья Пирожок]

Алексей Струков: Спасибо большое, давно верстаю а вот это упустил

Answer 2

[Алексей Струков]

Есть несколько способов
Если тебе надо, чтобы все итемы были одного размера и центрировались посередине контейнера, то лучше сделать через display: flex