Как решить проблему с grid?

Question

[yapaofficial]

есть баг что все четные реды встают в шахмотном порядке

вот код:

.main{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* в сетке должно быть 6 ячеек */
grid-gap: 36px 16px;
padding: 0 40px;
}

.product{
box-shadow: 0 20px 40px 0 rgb(0 0 0 / 10%);
transition: all 0.2s ease-in-out;
border: 1px solid #f1f1f1;
height: 468px;
display: flex;
}

.product:nth-of-type(1n+1){
grid-column-start: 1;
grid-column-end: 3;
}

.product:nth-of-type(2n+2){
grid-column-start: 3;
grid-column-end: 5;
}

.product:nth-of-type(3n+3){
grid-column-start: 5;
grid-column-end: 7;
}

здесь один див занимает две ячейки в сетке

Comments

[ambisinister One]

yapaofficial, тут

Answer 1

[Ankhena]

Ещё бы ваша проблема имела отношение к гридам...

Итак, что такое (1n+1) при разных n
n=0 1
n=1 2
n=2 3
n=3 4
и т.д.
Вывод: про (1n+1) можно вообще не писать, потому что это ВСЕ элементы.

Ровно по такому же принципу расписываете (2n+2) и (3n+3) и делаете вывод, что это тоже самое (на самом деле почти тоже самое), что и 2n и 3n.

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

Пишем:

.product {
   grid-column: span 2;
}

Правда, встает вопрос, зачем делить на 6 и раздавать по 2. Но макета вы не показали, так что это всё предположения.