Оптимальное расположение вложенных упаковочных блоков ⇐ Html

[Anonymous]

Мой макет состоит из блоков, каждый блок содержит изображения. Блоки, как и изображения, при необходимости следует переносить, чтобы занимать как можно меньше места. Он должен быть отзывчивым и полностью динамичным.
Я пробовал display: flex, display: Grid и columns с различными комбинациями размера столбца, максимальной ширины и т. д. Я также пробовал некоторые библиотеки каменного типа.
Но я не нашел решения, которое не создавало бы некрасивые края или слишком много пробелов при изменении размера окна.
Вот скриншот пример плохого макета и того, как я его ожидаю:


Пример кода с использованием гибкого переноса:

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

.container { display: flex; flex-wrap: wrap; gap: 10px; }
.block { padding: 10px; background: #ccc; }
.images { display: flex; flex-wrap: wrap; gap: 10px; }
.image { background: #888; width: 100px; height: 100px; border-radius: 10px; }

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

Как это сделать правильно?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ing-blocks