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

Question

Нужно выстроить по 4 элемента в ряд вот со структорой указанной ниже.

Если использовать для .products-row свойство display: contents; (оно закомменчено), то элементы выстраиваются как надо. Может есть еще какие варианты?

.products-list {
   display: flex;
   flex-wrap: wrap;
}

.products-row {
    display: flex;
    flex-wrap: wrap;
}

/*.products-row {
   display: contents;
}*/

.product-item {
   flex: 1 1 calc(25% - 0.5em);
   max-width: calc(25% - 0.5em);
   margin-bottom: 1em;
   margin: 0.25em;
   box-sizing: border-box;
   padding: 1em;
   text-align: center;
}

/* Стилизация, не влияет на контент */
.products-list {color: #fff;}  .products-row:nth-child(1) {background: #ccffee;}  .products-row:nth-child(2) {background: #ffeecc;}  .product-item:nth-child(1) {background: #999;}  .product-item:nth-child(2) {background: #666;}  .product-item:nth-child(3) {background: #333;}

<div class="products-list">
    <div class="products-row">
        <div class="product-item">1</div>
        <div class="product-item">2</div>
        <div class="product-item">3</div>
    </div>

    <div class="products-row">
        <div class="product-item">4</div>
        <div class="product-item">5</div>
        <div class="product-item">6</div>
    </div>
</div>

БЛОГ НА HUSL

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

Ответы (0 шт):