Css grid-row для повторяющихся рядов

Я хочу сделать галерею с использованием компоновки сетки CSS:

Но я не могу повторить grid-row для следующих 6 элементов div. Я использую css nth:child() элемент, но он не работает должным образом. Вот мой исходный код:

.wa-works-page .content .works-gallery {
display: grid;
grid-gap: 10px;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+1) {
grid-column: 1;
grid-row: 2n+1;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+2) {
grid-column: 2;
grid-row: 2n+1;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+3) {
grid-column: 3;
grid-row: 2n+1 / span 2;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+4) {
grid-column: 4;
grid-row: 2n+1;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n+5) {
grid-column: 1 / span 2;
grid-row: 2n;
}

.wa-works-page .content .works-gallery .work-image:nth-child(6n) {
grid-column: 4;
grid-row: 2n;
}

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector