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;
}Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …