Masonry Layout Generator
A masonry grid puts each new tile into whichever column is currently shortest. It is a one-line rule that produces a surprisingly good layout and a bottom edge that is never quite level, because the rule cannot look ahead to the tall tile arriving last. This generates a set of tiles, packs them that way, draws the result, and reports how far apart the columns finish — so the trade-off is visible rather than described.
What this generator does
Draws a height for each tile, then places them one at a time into whichever column is shortest at that moment. Every column is re-measured for overlaps before display, and the reported heights are the ones the tiles actually produce.
How to use this tool
- Choose how many tiles to place and how many columns to use.
- Generate, and look at where the columns finish.
- Try more columns to see the bottom edge get less even, not more.
- Use a seed to keep the same tile heights while changing the columns.
Understanding the controls
- How many tiles
- Between 2 and 120. More tiles usually level the columns out, because there are more chances to correct an imbalance.
- Columns
- Between 2 and 12. More columns means each one gets fewer tiles, so a single tall tile has more effect on the finished edge.
- Seed
- Reproduces the same tile heights, which is the only way to compare two column counts on genuinely identical input.
Common use cases
- Prototyping a staggered card grid before building it
- Producing sample layout data for a component or template
- Demonstrating why greedy column packing leaves an uneven edge
- Testing how a design copes with a wide range of tile heights
- Comparing column counts on the same set of tiles via a seed
How this generator works
Each tile is placed in whichever column has the smallest running height, which is the standard masonry rule. That makes it greedy: it is optimal for every tile at the moment it is placed and can still be beaten overall, because a tall tile arriving last has nowhere good to go. Before display each column is walked in order and every tile is checked to start at or below the previous one's bottom edge, so no overlap can be shown, and each column's stated height is confirmed against its own tiles.
Randomness and fairness
Uses your browser's cryptographic random source for the tile heights by default. A seed switches to a reproducible sequence, which is deterministic and not cryptographically secure.
For how randomness is produced across the whole site, see how Generate Random works.
Limitations and good to know
- Tile heights are drawn at random rather than measured from real content, so this is a layout study rather than your actual grid.
- All columns are the same width, which is what masonry assumes; a layout with a wide feature column is a different packing problem.
- The greedy rule is not optimal, and deliberately so — an optimal packer would reorder your tiles, which usually matters more than a level edge.
- Nothing is placed horizontally across columns, so a tile that should span two columns cannot be represented.
Privacy and your data
The layout is generated in your browser. Nothing is uploaded and no setting you choose is included in analytics.
Related generators
- Contact Sheet Layout GeneratorWorks out the grid and the exact cell size for a sheet of thumbnails, with margins and gutters taken off first so the numbers actually fit the page.
- Aspect Ratio Fit CalculatorThe exact size an image becomes when contained inside a frame or made to cover it, with the letterbox bars and the cropped-off amounts measured.
- Crop Ratio CalculatorThe largest crop of a chosen ratio that an image can give, in exact whole multiples, with the offset to centre it and the area you keep.
- Colour Palette GeneratorGenerate a real colour palette — six harmony types, with hex, RGB and HSL values and the contrast each colour gives with text.