Как создать динамический макет сетки CSS, например прикрепленное изображение, внутри цикла запроса? ⇐ CSS

[Anonymous]

Я пытаюсь создать макет сетки CSS для сообщений в блоге внутри цикла запроса. Каждый блок должен поддерживать соотношение сторон примерно 3:2, а макет должен быть динамичным. Ниже показано, что я пробовал на данный момент:
HTML (структура не может быть изменена)

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

CSS

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

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.item:first-of-type,
.item:nth-child(5n),
.item:nth-child(7n) {
grid-column: span 2;
grid-row: span 2;
}

Хотя это работает для первых нескольких элементов, макет становится непоследовательным и выглядит не очень хорошо по мере добавления новых элементов.
Вот изображение макета, который я пытаюсь создать для справки.


Как можно Я создаю такой динамичный и последовательный макет сетки, сохраняя при этом соотношение сторон для всех элементов?

Подробнее здесь: https://stackoverflow.com/questions/792 ... query-loop