Estoy buscando agregar imágenes de diferentes tamaños en un patrón de mosaico a un lienzo HTML de ancho y alto establecido.

Algo como esto:

Esto se puede hacer con una cuadrícula div y CSS. Algo como:

 .gallery { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; } .wide { grid-column: span 2; } .tall { grid-row: span 2; }

Pero para hacer esto con el elemento lienzo, necesito calcular sus posiciones y dimensiones.

¿Hay algún paquete, algoritmo o técnica de npm que pueda usar para calcular las posiciones y dimensiones de las imágenes que se colocarán en el lienzo?

Estoy usando Reaccionar.