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

[Anonymous]

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

< div class="snippet-code">

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

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

.item {
border: 1px solid black;
background-color: green;
margin: 2px;
}

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

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

1
2
3

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


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

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