CSS Grid Layout и nth-child ⇐ CSS

[Гость]

Я собираюсь создать макет с динамическим количеством изображений, используя css-grid, но у меня есть проблема: я хотел бы, чтобы первые 10 изображений были креативно разработаны, а последующие — они упорядочены в сетке.

Вместо этого, начиная с 11, они переходят к вставке там, где находят место в сетке.
Я прилагаю эталонное изображение и ссылку this jsfiddle с примером моего кода.

Пожалуйста, помогите мне,
заранее благодарю

Вероятно, ошибка здесь

Код: Выделить всё

#container .mix:nth-child(n+11){
grid-column-start: 1;
grid-row-start: 43;
grid-column: span 4;
grid-row: span 2;
}

эталонное изображение

Код: Выделить всё

#container {
display: grid;
grid-template-columns:repeat(15, 1fr);
grid-template-rows: repeat(20, 1fr);
}

#container .mix:nth-child(1){
grid-column: 7 / span 9;
grid-row: 1 / span 8;
}

#container .mix:nth-child(2){
grid-column: 1 / span 9;
grid-row: 4 / span 8;
}

#container .mix:nth-child(3){
grid-column: 9 / span 7;
grid-row: 8 / span 4;
}

#container .mix:nth-child(4){
grid-column: 1 / span 9;
grid-row: 11 / span 8;
}

#container .mix:nth-child(5){
grid-column: 7 / span 9;
grid-row: 17 / span 8;
}

#container .mix:nth-child(6){
grid-column: 1 / span 5;
grid-row: 22 / span 8;
}
#container .mix:nth-child(7){
grid-column: 5 / span 7;
grid-row: 25 / span 8;
}
#container .mix:nth-child(8){
grid-column: 10 / span 6;
grid-row: 23 / span 8;
}

#container .mix:nth-child(9){
grid-column: 1 / span 8;
grid-row: 31 / span 8;
}
#container .mix:nth-child(10){
grid-column: 8 / span 8;
grid-row: 34 / span 8;
}

#container .mix:nth-child(n+11){
grid-column-start: 1;
grid-row-start: 43;
grid-column: span 4;
grid-row: span 2;
}

Код: Выделить всё

[img]https://via.placeholder.com/480x240[/img]

[img]https://via.placeholder.com/480x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]

[img]https://via.placeholder.com/400x240[/img]



[img]https://via.placeholder.com/400x240/ff0000[/img]

[img]https://via.placeholder.com/400x240/ff0000[/img]

[img]https://via.placeholder.com/400x240/ff0000[/img]

[img]https://via.placeholder.com/400x240/ff0000[/img]

Подробнее здесь: https://stackoverflow.com/questions/542 ... -nth-child