Skip to main content

Collage Maker Guide

Photo Grid Maker — cells, not a synonym pile

A grid is a CSS template keyed to how many pictures you loaded. This page is about choosing that map, spacing the gutters, and keeping subjects inside the cells.

Need the main studio? Collage Maker

Written by Safaat Rahman Siham, Founder & Developer at Convertify4u. Contact us.

How grids work in Collage Studio

Count-matched templates

Add two files and you see two-cell splits (side by side, stacked, and a few diagonals). Add four and you get 2×2 plus mixed hero layouts. Nine files unlock a classic tic-tac-toe. Sixteen is a dense sheet. The layout strip only lists templates whose imageCount matches — you cannot drop six photos into a four-cell map without removing files or switching. That constraint is why the board stays aligned. Clip-path shapes (circle, heart, star) appear mainly at low counts; they are still grids with a mask, not a separate product.

Cover crop, gap, and radius

Each cell is object-fit: cover. Extra picture is cropped; you pan with a drag so the leftover is sky or wall, not a forehead. Gap (0–32 px) is the gutter color of the canvas background. Radius rounds cell corners — useful for a friendly social tile, dangerous on a comparison where you need every millimetre of a product edge. Mixed-size templates exist so a hero shot can dominate while supporting angles stay small. Equal-size templates exist so a jury of SKUs feels fair. Pick based on hierarchy, not on which thumbnail looks busier.

Comparison grids vs recap grids

Two-up horizontal is the honest before/after. Four-up is a room walk or a colorway. Nine-up is an event dump that should still be readable on a phone — beyond that, labels disappear and the board becomes texture. If the destination wants a swipe through full-frame shots, you want carousel mode, not a 16-cell postage sheet. This spoke stays on Single mode: one file out, many cells in.

How it works

  1. 1

    Load the exact count

    Templates appear for that number. Adding a fifteenth photo is how you leave a 14-cell map.

  2. 2

    Choose equal vs hero

    Equal cells for comparison. Mixed cells when one frame is the story and the rest are evidence.

  3. 3

    Pan, then set gutter

    Fix faces first. Then decide whether a white gap helps or just shrinks the pictures.

Use cases

Before and after

Two-cell maps for renovations, restorations, or “with product / without.”

Colorways

Four or six equal cells so no SKU looks like the favorite.

Contact-sheet energy

Nine or twelve thumbnails for a shoot that will be edited later — a map, not the final selects.

Shape-cut icons

Circle or hex single-cell when the grid is really a masked portrait.

Problems we solve

Apps that only ship 3×3

Phone collage apps often stop at nine. This studio continues through sixteen, with mixed maps at lower counts.

Forced equal crop

Some tools slice everything into identical squares. Mixed templates keep a hero.

Desktop editors for a 2×2

You should not need a layer stack to put two JPEGs next to each other.

Trust & technology

Templates follow count

No empty mystery cells unless you loaded fewer pictures than the map expects — and then you should switch maps.

Focus is per cell

Each photo has its own object-position. Neighbors do not inherit a bad pan.

Local assemble

The grid is built in the tab. See the private spoke if that is the main reason you are here.

Frequently asked questions