Чередование строк с использованием CSS-сеток и nth-child ⇐ CSS

[Anonymous]

Я работаю над сеткой товаров с таким чередующимся шаблоном строк.


Цветные контейнеры представляют то, как, по моему мнению, должны выглядеть строки.
По сути, в первой строке находятся два продукта, а во второй строке — один продукт. , повторяясь бесконечно. Я пытался сделать это с помощью CSS-сеток + n-го дочернего элемента, но, похоже, у меня не получилось. Вот что у меня есть на данный момент:

Код: Выделить всё

.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 0;
width: 70vw;
margin: 0 auto;
}

.item:nth-child(3n+3) {
grid-column: auto / span 2;
background-color: #e2a7de;
}

/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}

Код: Выделить всё

X

X

X

X

X

Мой мозг не может осмыслить объединение сеток и n-го дочернего элемента для создания этот макет. Я также открыт для лучшего способа создания шаблона 2-1-2, если у кого-то есть другие предложения. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/737 ... -nth-child