Прошу помочь с задачей.
Пытаюсь построить ряд из квадратиков на flexbox, по аналогии как это делается с сеткой товаров в интернет магазинах.
Нужно, чтобы все квадраты были расположены по центру (это получилось) но при сужении экрана тот квадрат которые переносится должен вставать четко под квадрат № 1, т.е. сначала строки а не по центру.
Нагуглил решение, но оно на основе добавления фейковых элементов, всё работает, но как эти элементы убрать или скрыть, чтобы снизу не образовывался большой отступ?
Вот сам исходник
.parent {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background: #FFD54F;
margin: 0 auto;
width: 100%;
}
.parent .item,
.parent .dummyItem {
width: 290px;
height: 290px;
background: #c7ffc4;
margin: 10px;
border: 1px solid red;
}
.parent .dummyItem {
height: 0px;
}
<div class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
<div class="dummyItem"></div>
</div>