Сетка, выравнивающая неизвестное количество элементов div при сохранении их соотношения сторон

Question

Я получаю неизвестное количество изображений (может быть одно или много), которые имеют соотношение сторон 16: 9, я пытаюсь разместить их в контейнере ограниченного размера.

К чему я стремлюсь если я получу одно изображение, то оно закроет весь контейнер. Если я получу 30 изображений, я бы хотел, чтобы они имели одинаковую ширину и высоту и сохраняли соотношение сторон 16: 9. Количество столбцов и строк не следует указывать заранее.

Я делаю это в React. js.

<div className={styles.root}>
    {data.images.map((image, index) => (
      <ImageBlock url={image.url} key={index} />
    ))}
</div>

Так выглядит мой код.