Every box keeps its shape, and every gutter comes out exact.
Four ways to pack boxes of any shape, all running live below. Fill a box searches every arrangement of up to six boxes for the one with the least empty space and crop, and steers away from boxes that shrink to slivers. Even weight breaks a list into rows and gives every box the same area, so the wide ones stop dominating. Even grid puts every box in a same-size cell and picks the column count that makes the boxes biggest. Justified fills every row to the edge at one height, as a photo gallery does.
Every box keeps its exact shape, and whatever the container's shape leaves over becomes empty margin, never a crop; Align says where the margin goes. Gap and padding are shares of the box's height here; give the container a width and height and they are pixels. columnGap and rowGap set the two directions apart. Click a box to remove it. Up to six boxes: the search tries every guillotine arrangement. Lattice's collage layout is this strategy.
Equal cells draw each box as large as its cell allows, so a wide box takes the room. Equal area gives every box the same area, unless that would stand it taller than a cap. Rows are balanced, and Align places each one; justify spreads a row across the width and starts the last row at the left. Gap and padding are shares of the width here. Lattice's logo-wall layout is this strategy.
Every cell is the same size and every box sits inside its cell at its own shape. auto tries every column count and keeps the one that makes the boxes biggest, so wide boxes stack and tall ones go side by side. The last row starts at the left. Gap is a share of the box's height here.
Every row but the last fills the width exactly, its boxes at one height, and each box keeps its shape. The breaks keep the rows as close as they can be to the row height you ask for. The last row is not stretched. The height of the whole layout is an output. Row height and gap are shares of the width here.
Each one loads a set into the demo above and shows what the strategy does with it.
The Fill a box layout above, as the CSS grid toGrid() hands you. The tracks are fr, so the browser fits the grid to whatever box it has. Each box spans whole tracks and keeps its exact shape, because every width in the tree was solved as a straight line in its height, gutters included.
Six boxes is the worst case for tree: every guillotine arrangement of every order. rows takes a list of any length. This runs each 40 times in your browser and reports the median.
Two Lattice layouts run on Mosaico, in the command-line export and in the live preview alike.
Measured on one machine: median / 95th percentile, in ms. The three solve different jobs, so read each column for what it does.
| Items | Mosaico free | Mosaico ordered | diorama 2.0.18 | justified-layout 4.1.0 |
|---|---|---|---|---|
| 4 items | 0.21 / 0.46 | 0.04 / 0.27 | 0.13 / 0.59 | 0.01 / 0.02 |
| 6 items | 8.19 / 12.11 | 0.39 / 0.58 | 0.43 / 0.98 | 0.01 / 0.02 |
| What it does | Every order, every guillotine arrangement, exact gutters | Your order, every arrangement, exact gutters | Ordered trees only, no gutters | Rows only; the height lands wherever it lands |
This page runs the real library in your browser. Learn how Mosaico works, and how to use it →