Как сделать повторяющийся шаблон в CSS Grid?

Например я делаю такую сетку:
5d1a8cd7c76c6331807031.png
И делаю следующий код:
.content_photo_grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas: "grid-cell-1 grid-cell-2 grid-cell-3 grid-cell-4" "grid-cell-1 grid-cell-5 grid-cell-6 grid-cell-6" "grid-cell-7 grid-cell-7 grid-cell-8 grid-cell-9";
}
.photo_grid_cell:nth-child(9n+1) { grid-area: grid-cell-1; }
.photo_grid_cell:nth-child(8n+2) { grid-area: grid-cell-2; }
.photo_grid_cell:nth-child(7n+3) { grid-area: grid-cell-3; }
.photo_grid_cell:nth-child(6n+4) { grid-area: grid-cell-4; }
.photo_grid_cell:nth-child(5n+5) { grid-area: grid-cell-5; }
.photo_grid_cell:nth-child(4n+6) { grid-area: grid-cell-6; }
.photo_grid_cell:nth-child(3n+7) { grid-area: grid-cell-7; }
.photo_grid_cell:nth-child(2n+8) { grid-area: grid-cell-8; }
.photo_grid_cell:nth-child(1n+9) { grid-area: grid-cell-9; }


Типа все блоки имеют один и тот же класс, но и каждый там скажем 1й через каждый 9 блок занимает такую то позицию.
И при всем при том это работает как надо, однако, если мне потребуется в эту сетку вставить новый блок, мне по сути необходимо, чтобы он повторялся, скажем так:
5d1a8d733ef8e903709316.png
То есть новый элементы добавятся после текущих в формате сетки. Итак к проблеме.

Проблема в том, что оно так не работает, новые блоки сейчас накладываются друг на друга так:
5d1a8dcf0e72c433239435.png

Как мне решить данную проблему? Спасибо всем откликнувшимся!
  • Вопрос задан
  • 748 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы