Square Grid
Square Grid is a SalonEngine layout that arranges your blocks into a tidy grid of equal squares. Every cell has the same size, giving you a calm, ordered look that's ideal for portfolios, product shots, and thumbnail galleries.
It works with image, text, video, and page blocks.
Square Grid is one of several SalonEngine layouts. See the layouts overview to compare it with Canvas, Justified, and Variable Grid.
When to use it
Reach for Square Grid when you want:
- A uniform, gallery-style wall where nothing dominates
- Equal visual weight for every item
- A clean grid that reads predictably at any scale
If you'd rather images keep their natural proportions, use Justified or Fixed Width instead.
Settings
Open the Section panel and choose the Layout sub-tab to configure Square Grid.
Columns
Set how many columns the grid uses, from 1 to 10. Fewer columns mean larger squares; more columns mean smaller thumbnails.
Spacing
Choose the gap between cells: None, 2px, S, M, or L. Use None or 2px for a seamless mosaic, or M/L to let each square breathe.
Image Fit
Controls how each image sits inside its square:
| Mode | Behaviour |
|---|---|
| Fit (No Crop) | Shows the whole image, letterboxed inside the square (default) |
| Fill (Crop) | Crops the image so it fills the square edge to edge |
Choose Fit when you don't want to lose any part of an image. Choose Fill for an even, uninterrupted grid where every square is fully covered.
Alignment
When an image doesn't perfectly fill its square, Horizontal Alignment (Left / Center / Right) and Vertical Alignment (Top / Center / Bottom) decide where it sits.
- In Fit mode, this positions the letterboxed image and the empty space around it.
- In Fill mode, this chooses which part of the cropped image stays visible.
Resizing blocks
You can make a block span more than one column. Drag a block's edge to resize it, and it snaps to the grid on release. Square Grid also supports drag-and-drop reordering, so you can rearrange your wall directly on the canvas.
To clear every custom span and return all blocks to a single cell, use the Reset block sizes button at the bottom of the Layout settings. It shows how many blocks currently have a custom size.
Tips
- For a true uniform mosaic, pair Fill (Crop) with None or 2px spacing.
- More columns on desktop can feel cramped on phones — preview on mobile before publishing.
- When you're done, click Stop Editing (or the Preview pencil icon in the floating toolbar) to leave edit mode. This clears the cache so your changes go live.