Генерация и разделение сетки с помощью css/js/php

Я работаю над веб-проектом и думаю о том, как лучше всего подойти к следующему сценарию:

У меня есть куча изображений в базе данных, и я хочу загрузить их в сетку. Изображения с высоким рейтингом должны иметь больший холст, в то время как изображения с более низким/низким рейтингом - нет. Размер изображений не является стандартным, поэтому это может быть либо портретная, либо пейзажная картинка с разными размерами. Соотношение сторон должно оставаться неизменным, а окно должно быть полностью заполнено по горизонтали (с шириной 100%). Пользователи могут прокручивать по вертикали.

Чтобы дать вам представление о разделении полей в сетке, я прикрепил быстрый каркас.

У вас, ребята, есть идея, как лучше всего подойти к этому? Я подумал, может быть, мне следует "стандартизировать" несколько строк. И размещайте строки случайным образом, чтобы они не выглядели заранее заданными. Но это, очевидно, на самом деле не рассчитано. Любые мысли приветствуются!