Crie um layout de colagem e calcule as células

Ela encontra a largura necessária para cada coluna e a altura de cada linha, retornando o tamanho da tela e o retângulo exato de cada célula. Use o resultado para posicionar imagens com precisão em HTML, canvas, SVG, ferramentas de design ou pipelines de processamento, sem acumular deslocamentos manualmente nem correr o risco de sobrepor células.

Prepare as dimensões em ordem de linhas

Informe um par de largura e altura para cada imagem, da esquerda para a direita na primeira linha e depois nas linhas seguintes. Os campos rows e cols definem o formato da grade, portanto o produto deles deve corresponder exatamente à quantidade de imagens. Essa validação rigorosa evita um erro comum em colagens: deixar uma célula vazia ou descartar uma imagem excedente porque o formato desejado e a lista de origem não coincidem. Larguras e alturas devem ser números finitos positivos. Podem ser inteiros ou decimais, o que permite usar pixels, pontos, milímetros ou qualquer outra unidade consistente. Não misture unidades na mesma solicitação, pois o algoritmo considera todos os números parte de um único sistema de coordenadas. A resposta mantém a largura e a altura originais ao lado da célula calculada, facilitando a associação com a imagem correspondente e permitindo que você decida depois como ajustar, cortar ou alinhar o conteúdo.

Entenda o cálculo dos tamanhos das células

Cada coluna recebe a maior largura de origem encontrada nela, enquanto cada linha recebe a maior altura entre suas imagens. Assim, toda célula na interseção utiliza a largura da coluna e a altura da linha, mantendo as bordas alinhadas e garantindo espaço para a imagem em suas dimensões originais. A calculadora cria os deslocamentos x somando as larguras das colunas anteriores e os deslocamentos y somando as alturas das linhas anteriores. A primeira célula começa em zero, zero. A largura total da colagem é a soma das larguras das colunas, e a altura total é a soma das alturas das linhas. Essa abordagem produz uma grade retangular compacta sem inventar um tamanho de tela ou uma regra de redimensionamento. Ela calcula somente a geometria: não estica, corta, gira nem centraliza imagens. Essas escolhas visuais podem ser aplicadas depois com o retângulo retornado e as dimensões originais preservadas.

Use o resultado no pipeline de renderização

Leia o array cells na mesma ordem das imagens de entrada. Cada item inclui índice, linha e coluna com base zero, origem x e y, largura e altura da célula e dimensões originais da imagem. Um renderizador canvas pode desenhar em cada retângulo; um gerador de CSS pode converter column_widths e row_heights em trilhas explícitas; e um construtor de SVG pode criar retângulos de recorte antes de inserir os elementos de imagem. Como a saída é determinística e não contém valores dependentes do ambiente, a mesma solicitação gera uma geometria idêntica no navegador, em um processo de build ou pela API. Para centralizar sem redimensionar, subtraia as dimensões originais das dimensões da célula e divida cada diferença por dois. Para aplicar cover ou contain, calcule a escala com as proporções da célula e da imagem. Separar essas políticas mantém o layout previsível, verificável e reutilizável.