Как сделать такой грид?

Question

[indeveloping]

Есть список из li элементов которые должны раскладываться как на картинке. Количество элементов заранее неопределенно.

1-й и 10-й элемент занимают 2 ячейки по ширине и высоте. Следующие 11-й и 20-й тоже. И так далее. Я думал реализовать это через nth-child, но что-то не особо выходит, так как grid-row у больших ячеек должен быть всегда разный.

Answer 1

[Ankhena]

Интересно, на каких курсах дают это задание.
Я уже себе даже фиддл сохранила
https://jsfiddle.net/Ankhena/dfot524b/

Comments

[indeveloping]

Спасибо большое) Всегда выручаете.

P.S это не курсы :D

[Антон Литвиненко]

Ну не пашет jsfiddle на мобилке, даже не зайти чтобы форкнуть((

[Ankhena]

Антон Литвиненко, да? Вроде открывался раньше. Только не посмотреть нормально и это бесит.

[Ankhena]

Uneasy Hearts Weigh the Most,
1. Чем лучше? :)
2. jsfiddle позволяет работать без регистрации. Мне все эти фиддлы с ответами в моем аккаунте вообще не нужны.

Answer 2

[kryamk]

Ну если уж совсем по техзаданию...

Comments

[indeveloping]

Уффф, великолепно. Спасибо большое!