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

Question

[Andy Oker]

Тут пример расположения элементов в контейнере, которым я пользуюсь на своих проектах.

Тут есть 2 удобные для меня вещи.
1) Возможность делать подобные блоки без медиа запросов, они сразу же адаптивны для всех экранов
2) И то как они выстраиваются - когда 1 или любое кол-во элементов падают на нижнюю строку они прибиваются к краю контейнера пропорционально остальным элементам.

Но тут есть фантомные элементы <div class="box__item empty">, которые приходится использовать в качестве заполнителей пустого пространства нижней строки.Хочу от них избавится.
Буду рад если накидаете свои варианты реализации подобного блока!

Comments

[Gary_Ihar]

Ты же добавил тег css grid. Почитай про них, пройди игру про гриды и все получится у тебя :) максимум 30 минут на освоение уйдёт

[Andy Oker]

Gary_Ihar, есть такое. Я знаю эту, гриды и margin-right. Думаю, что каждый по - разному использует и есть еще варианты

Answer 1

[Ankhena]

Обычным гридом с auto-fit
https://jsfiddle.net/kxpfm98q/

Answer 2

[Олег]

Не совсем понял вопроса но вот так без блоков работает как и с блоками:
html{overflow-x:hidden}
body{
margin: 0;
padding: 0;
}

.empty{
opacity: 0;
visibility: hidden;
height: 0 !important;
max-height: 0;
min-height: 0 !important;
padding-bottom: 0;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

.container{
max-width: 600px;
margin: 0 auto;
}

.box{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: calc(100% + 30px);
margin-left: -15px;
}

.box__item{
width: 100px;
max-width: 100%;
height: 60px;
background-color: red;
margin: 0 15px 30px;
}

Comments

[Ankhena]

Только блоки не растягиваются

Answer 3

[Steppp]