@yapaofficial

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

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

вот код:

.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;
}

здесь один див занимает две ячейки в сетке
628a6455dcc22102906979.png
628a642c03198729413123.png
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Ещё бы ваша проблема имела отношение к гридам...

Итак, что такое (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. Но макета вы не показали, так что это всё предположения.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы