I needed to create a social media header image last year -- five product screenshots arranged in a single 1200x630 image for Open Graph previews. I opened a graphics editor and started dragging images around. Thirty minutes later, it still looked off. The spacing was inconsistent. One image was slightly taller than its neighbors. The gaps between images were visually uneven even though they were numerically identical.
The problem was not my eye. The problem was that I was treating collage layout as an art problem when it is actually a geometry problem.
Why naive grid layouts fail
The simplest approach to a collage is a uniform grid: divide the canvas into equal cells and place one image per cell. A 2x3 grid on a 1200x600 canvas gives you six cells of 600x200 each.
This works only if all your images have the same aspect ratio as the cells. A 600x200 cell has a 3:1 aspect ratio. If your source images are 16:9 (1.78:1) or 4:3 (1.33:1), they will not fit without cropping or letterboxing.
Cropping means cutting off parts of the image to fit the cell. This works if the subject is centered, but it fails for images where the subject is near an edge. An automatic center crop on a group photo can cut off the people standing at the sides.
Letterboxing means adding bars (usually black or white) to fill the extra space. This preserves the full image but looks unfinished in a collage -- the bars create visual holes.
Stretching means distorting the aspect ratio. Never do this. Stretched images are immediately perceived as wrong, even by people who cannot articulate why.
The real solution is to design the grid around the images rather than forcing images into a predetermined grid.
Aspect-ratio-aware layouts
Professional collage tools use layouts where cell dimensions vary to accommodate different image proportions. The key constraint is that all cells must tile perfectly with no gaps and no overlaps.
Consider a simple two-image layout on a 1200x600 canvas:
If both images are landscape (wider than tall):
+--------+--------+
| | |
| img1 | img2 |
| | |
+--------+--------+
Each cell: 600x600 (after a gap)
But if one image is portrait and one is landscape:
+----+----------+
| | |
|img1| img2 |
| | |
+----+----------+
Left cell: 300x600 (portrait)
Right cell: 900x600 (landscape)
The widths adjust so each image can fill its cell with minimal cropping. The constraint is that heights must match (they share a horizontal seam) and widths must sum to the canvas width.
For more complex layouts, the algorithm needs to solve a constraint satisfaction problem: given N images with known aspect ratios, find a rectangular tiling of the canvas where each cell's aspect ratio is as close as possible to its assigned image's ratio.
The CSS grid connection
If you are building a collage layout for the web instead of a static image, CSS Grid handles this beautifully:
.collage {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
width: 1200px;
height: 600px;
}
.collage img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Make the first image span two rows */
.collage img:first-child {
grid-row: 1 / 3;
}
The object-fit: cover property is the CSS equivalent of center-cropping: the image fills its container, maintaining aspect ratio, and the overflow is hidden. Combined with object-position, you can control which part of the image is visible:
/* Keep the top of the image visible (good for landscapes with sky) */
.collage img {
object-fit: cover;
object-position: top center;
}
Spacing and visual balance
The gap between collage cells has a disproportionate effect on how the result looks. A few principles from graphic design:
Consistent gaps. If the gap between cells varies even by a single pixel, the human eye detects it. Use a fixed gap value and do not round differently for different seams.
Gap size relative to image size. A 2px gap looks sharp on a 600px image but invisible on a 100px thumbnail. A 20px gap looks elegant on a 600px image but wasteful on a 100px thumbnail. Scale the gap proportionally -- 0.5-1% of the shortest cell dimension is a reasonable heuristic.
Border radius. Rounded corners on collage cells add visual softness. But all corners must use the same radius, and the radius must not exceed half the smallest cell dimension, or the rounding will look different on small cells vs. large ones.
Drop shadows and borders. On a white background, a subtle shadow (1-2px offset, 3-4px blur) helps separate adjacent images. On a dark background, a 1px white or light-gray border achieves the same effect. Do not use both.
Common mistakes
Using inconsistent resolutions. If one image is 4000x3000 and another is 400x300, the high-res image will look sharp and the low-res one will look blurry. Resample all images to the same target density before compositing. For a 1200px-wide canvas on a 2x display, each image should have at least enough pixels to fill its cell at 2x resolution.
Ignoring visual weight. A bright, high-contrast image draws more attention than a muted one. If your collage has one vivid sunset and four dim interior photos, the sunset will dominate regardless of placement. Put the most visually striking image in the largest cell, or the center, where dominance is expected.
Not considering the final output format. A collage for Instagram needs a 1:1 or 4:5 aspect ratio. A Facebook shared link preview is 1.91:1. A Twitter card is 2:1. Design the canvas dimensions for the platform, not the other way around.
Over-cropping. Aggressive cropping to fit a layout can remove essential content. If an image cannot be cropped to a cell's aspect ratio without losing important information, change the layout rather than sacrificing the image.
When I need to combine images quickly -- product screenshots for documentation, before/after comparisons, or social media assets -- I use the collage maker at zovo.one/free-tools/collage-maker to handle the layout math and export a clean composite.
A good collage is invisible. The viewer sees the images, not the grid. That happens when the geometry is precise and the layout decisions are deliberate rather than approximate.
I'm Michael Lip. I build free developer tools at zovo.one. 350+ tools, all private, all free.
Top comments (0)