Variable Grid
Variable Grid is a column-based masonry SalonEngine layout. Blocks flow into a fixed column grid, each spanning a variable number of columns, and stack to fill gaps. It's the layout for editorial galleries that feel composed rather than uniform.
Open the Section panel and pick Variable Grid from the layout list to apply it.
How it works
You choose a column grid, then each block claims a width measured in columns. Blocks pack top-to-bottom into the shortest available column, so taller and wider blocks naturally interlock — like a magazine spread.
To reorder, drag a block in the editor. A red drop indicator shows where it will land, and the grid snaps it into place on release.
Controls
All controls live in the Section panel when Variable Grid is active.
Column Grid
Pick the underlying grid: 6 col, 12 col, or 24 col. More columns means finer control over block widths and a denser composition.
Each grid keeps its own block widths, so switching between 6, 12, and 24 preserves the sizing you set for each one independently.
Spacing
Set the gap between blocks: None, 2px, S, M, or L. Spacing saves immediately.
Snap to Grid
When Snap to Grid is on (the default), resizing a block snaps its width to the nearest whole column when you release. Turn it off to allow free, between-column widths.
Resizing blocks
Hover a block in the editor and drag its resize handle left or right to change how many columns it spans. A column overlay appears while you drag so you can see where the width will land, and the block snaps on release (when Snap to Grid is on).
Generate a layout
The Generate Layout panel reshuffles your grid into a fresh composition in one click.
| Control | What it does |
|---|---|
| Randomize Block Sizes | Assigns each block a new column width within the range you set. On by default. |
| Block Width Range | Sets the minimum and maximum column span for randomized widths. Click the track to set the range. |
| Shuffle Order | Reorders blocks before they're placed, for a different arrangement. Off by default. |
| Generate Layout | Applies your choices. The button turns red when you've changed a setting and is ready to apply. |
Turn off Randomize Block Sizes to keep your current widths and only re-pack the grid. With both Randomize and Shuffle off, there's nothing to generate, so the button is disabled.
Section background
Use the background row at the bottom of the panel to set a section background color, or jump to the Background tab for an image background.
Visitor interaction
You can let visitors rearrange the grid on your live site. These options share the standard visitor-interaction settings:
- Resize — visitors drag a block's handle to change its column span.
- Remove — visitors hide individual blocks.
- Reset — shows a floating Reset button so visitors can restore the original layout.
Visitor interaction applies on desktop only.
Blocks you can add
Variable Grid works with image, text, video, and page blocks. Drop image or video files directly onto the section to add them. For newsletter, contact form, and map blocks, use the ••• menu in the toolbar.
Mobile
Variable Grid adapts on smaller screens. You can keep the exact desktop composition scaled down to fit, or let it re-flow into fewer columns — set this in the mobile view's spacing and display options.
Related
- Canvas — free-form drag-and-drop placement with pinning
- Square Grid — uniform square tiles
- Fixed Width — responsive tile-based grid
- Choosing a layout — compare all SalonEngine layouts