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

Question

[Don Puh]

Нужно выстроить по 4 элемента в ряд вот с такой структорой.
Живой код на Codepen: https://codepen.io/donpuh/pen/poXqQvz

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

<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>

Comments

[Ivan Ustûžanin]

а чем display: contents; не устраивает? собственно если от -row нужно избавляться, то это делается или прямо в DOM, или через display: contents;, других вариантов вроде как не существует

[Don Puh]

IvanU7n, поддержка на caniuse немного смущает.
Да, согласен, что с другой структрой вообще бы не встал этот вопрос, но интересует именно такой вариант.

[Ivan Ustûžanin]

Don Puh, так там про баги, которые в данной ситуации неприменимы и касаются в основном доступности
да и другого варианта при текущих вводных всё равно нет, так что или display: contents; или «такое невозможно»

Answer 1

[Антон Антон]

Можно попробовать вернуться к истокам https://codepen.io/FragsterAt/pen/VwJqVbx

а вообще можно выкинуть row и сделать grid https://codepen.io/FragsterAt/pen/xxomQLX

Comments

[Don Puh]

Так нужно чтобы было 4 в ряд при нынешней структуре.

[Антон Антон]

Don Puh, а, тогда без вариантов, либо структуру менять, либо display: contents