Set the columns, gap and column widths of a masonry grid
Choose auto or fixed columns, set the gap, and use Advanced options for column widths, hidden and locked layers, and layer order.
Goal
Control how many columns Masonry builds, how wide they are, how far apart the cards sit and which layers move.
Before you start
- Masonry open, with a frame or several layers selected.
Steps
- Set the gap Gap between items sets the space between columns and between cards in pixels, from 0 upwards (16 px to start). Drag the slider up to 320 px, or click the value and type a number up to 512.
- Pick auto or fixed columns With Auto columns on, Masonry fits as many columns as the width allows and keeps the grid balanced, so a small selection forms rows instead of one long line. Turn Auto columns off and use the Columns slider for an exact count; fixed columns all get the same width.
- Open Advanced options Click Advanced options to set Preferred column width (240 px to start), Minimum column width (128 px) and Maximum columns (6, up to 24). Auto columns aim for the preferred width, never go narrower than the minimum, and never exceed the maximum.
- Choose which layers move Skip invisible layers leaves hidden layers out, and Respect locked layers leaves locked layers untouched. Both are on to start.
- Choose the order With Preserve layer order on, cards are placed in the order of the Layers panel. Turn it off to sort them by their position on the canvas, left to right. Align to top-left origin starts the grid at the top-left of your layers instead of at the first layer's position.
- Apply Click Apply Layout. Reset in the footer puts every setting back to its starting value.
Tips
- Click any value next to a slider to type it. Enter keeps the new value, Escape brings back the old one.
- Use gap values from your spacing scale, such as 8, 12, 16 or 24 px, so the grid matches the rest of your design.
Result
A grid with the column count, widths and spacing you chose, built only from the layers you want to move.
If something goes wrong
- Auto columns gives fewer columns than I expected. Masonry keeps the grid balanced and never makes more columns than there are layers or than Maximum columns allows. Lower Preferred column width, or turn Auto columns off and set the count yourself.
- The Columns slider stops before the number I want. It cannot go above Maximum columns. Raise Maximum columns under Advanced options first.
Common questions
What is the difference between auto and fixed columns?
Auto columns work out the count from the container's width and your column width settings. Fixed columns use exactly the number you set, up to Maximum columns, and give every column the same width.
Can I use a different gap for rows and columns?
No. Masonry uses one gap for both directions.
Why did a hidden layer not move?
Skip invisible layers is on, so hidden layers stay where they are. Turn it off under Advanced options to include them.
Does Masonry remember my settings?
Yes. After you apply a layout, the settings are saved on the container, so selecting it again later brings them back.