Create an image collage layout

It finds the width required by each column and the height required by each row, then returns the collage canvas size and the exact rectangle for every cell. Use the result to place images accurately in HTML, canvas, SVG, design tools, or an image-processing pipeline without manually accumulating offsets or risking overlapping cells.

Prepare dimensions in row-major order

Supply one width and height pair for every image, ordered from left to right across the first row, then left to right across the next row, and so on. The rows and cols fields define the grid shape, so their product must equal the number of image records exactly. This strict count check prevents a common collage bug: silently leaving a blank cell or dropping an extra image because the intended shape and the source list disagree. Widths and heights must be positive finite numbers. They may be integers or decimals, which makes the calculator suitable for pixels, points, millimetres, or any other consistent unit. Do not mix units within one request, because the algorithm treats every number as part of the same coordinate system. The response preserves each source width and height alongside its calculated cell, making it straightforward to associate the layout entry with the original image and decide how that image should be fitted, cropped, or aligned later.

Understand how cell sizes are calculated

Each column is assigned the greatest source width found in that column, and each row is assigned the greatest source height found in that row. Every cell at their intersection therefore has the column width and row height, creating aligned grid boundaries while ensuring that each source image can fit inside its cell at its original dimensions. The calculator then builds x offsets by summing all earlier column widths and y offsets by summing all earlier row heights. The first cell begins at zero, zero. The total collage width is the sum of column widths, while the total height is the sum of row heights. This approach produces a compact rectangular grid without inventing a target canvas size or resizing policy. It deliberately calculates geometry only: it does not stretch, crop, rotate, or center an image. Those presentation choices can be applied afterward, using the returned cell rectangle and the preserved image dimensions as reliable inputs.

Use the result in a rendering pipeline

Read the cells array in the same order as the input images. Each entry includes its zero-based index, row and column, x and y origin, cell width and height, and original image width and height. A canvas renderer can draw into each returned rectangle; a CSS generator can convert the column_widths and row_heights arrays into explicit grid tracks; and an SVG builder can create clipping rectangles before inserting image elements. Because the output is deterministic and contains no environment-dependent values, the same request produces identical geometry in a browser, a build process, or an API workflow. If you want images centered without scaling, subtract the original dimensions from the cell dimensions and divide each difference by two. If you want cover or contain behavior, compute the scale from the cell and image aspect ratios. Keeping those policies separate makes this layout useful across many visual styles while leaving the grid calculation predictable, inspectable, and easy to test.