Как реализовать такую сетку на грид?

Question

[godsplane]

Я знаю как так сделать задавая каждой 10 фотке свое css свойство, но можно ли это как упростить?Чтобы каждая 10 фотография занимала 2 столбца и 2 строки? не применяя классы?

Элементов сетки может быть бесконечно. в этом и проблема чтобы каждый n элеметов стиль фото повторялся
https://codepen.io/poylar/pen/qBawpXB

Comments

[Ankhena]

Я знаю как так сделать задавая каждой 10 фотке свое css свойство, но можно ли это как упростить?

Чтобы каждая 10 фотография занимала 2 столбца и 2 строки? не применяя классы?

В первом предложении вы пишете, что знаете как это сделать.
Уточните, что именно вы хотите упростить?

Только не ясно, почему она каждая 10ая, если в последовательности 9 фоток и с большой все как раз начинается...

[godsplane]

Ankhena, https://codepen.io/poylar/pen/qBawpXB вот что у меня. ТО что у меня написано для first child я хочу повторять для каждой 10 фотографии в контейнере те же css свойства или тот же вид.
Я не могу использовать nth-child (1n +10) (или как то так) потому что свойство

grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;

Подходят только для старта сетки. Надеюсь понятно

[Ankhena]

godsplane, для этого в гридах есть span. Пройдите игру или почитайте в спеке.

[godsplane]

Ankhena, спасибо помогло, но из-за смещения каждого 10 элемента вперед получается не одинаково. Что тут можно использовать, подскажите , пожалуйста.

[Ankhena]

godsplane, могу только процитировать саму себя

Только не ясно, почему она каждая 10ая, если в последовательности 9 фоток и с большой все как раз начинается...

[godsplane]

Ankhena, ну даже если я ставлю 9n + 9 то все равно смещение идет же

[Ankhena]

godsplane, 9n+9 ??? И чем оно по-вашему отличается от просто 9n в данном случае?

Сделайте песочницу на jsfiddle.net и покажите ваше смещение.
Только nth-child сначала верно укажите.

[godsplane]

Ankhena, https://codepen.io/poylar/pen/qBawpXB

[godsplane]

Ankhena, Если пользуетесь инстой, то когда заходишь в рекомендованные там похожая сетка

[Ankhena]

godsplane, мне как-то даже неловко указывать на ошибки 3 класса

.item:first-child,
.item:nth-child(9n)

это покрасит 1, 9, 18, 27, 36...
Но вам-то надо не так.
Вам надо
1, 10, 19, 28...

Это 9n - 8

[godsplane]

Ankhena, спасибо большое. У меня проблемы с nth всегда

Answer 1

[approximate solution]

https://grid.layoutit.com/ развлекайтесь

Comments

[godsplane]

Я заходил на этот сайт, но тут нельзя спроектировать наперед. Первый блк с большим фото я сделал но мне нужно продолжиь. Я полагаю тут нужно играться со свойствами грид элементов и nth
так как первой фотографии я задал

grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}

[Ankhena]

godsplane, если вы пройдете игру https://cssgridgarden.com/#ru, то еще узнаете про волшебное слово span в гридах и станет заметно легче.