Fixed Width

Fixed Width is a SalonEngine layout that places your blocks into a grid of equal-width columns. Every column is the same width, while each block keeps its own natural height — so images, text, video, and page blocks flow into a tidy, responsive grid that fills the column width on any screen.

It's a good default when you want a clean, structured gallery without hand-placing anything.

When to use it

  • Galleries where you want a consistent, predictable column width
  • Mixed content (images, text, video) that should sit in neat columns
  • Layouts that should reflow cleanly from desktop down to mobile

For free-form placement, use Canvas instead. For rows that preserve each image's aspect ratio, see Justified. For a grid of perfect squares, see Square Grid.

Controls

Select a Fixed Width section, then open the Layout panel. You'll find:

ControlWhat it does
ColumnsSets the number of columns, from 1 to 10. All columns share the same width.
SpacingSets the gap between blocks. Choose None, 2px, S, M, or L. One setting controls both horizontal and vertical spacing.

Fine-tuning spacing

Next to Spacing, click the sliders icon to switch to advanced mode. This reveals a Gap slider (0–80px) for setting an exact gap value instead of the preset sizes.

Captions on mobile

On a phone, the columns are narrow. A caption that fits on one line on desktop can wrap to two lines there, which makes its tile taller and pushes the grid out of line. In Mobile view, the section panel has a Captions setting:

  • Wrap (default): captions show in full and can take several lines.
  • One line: every caption is cut to a single line ending in "…", so all tiles keep the same height and the rows stay even.

This setting only affects mobile. Desktop captions are unchanged.

Resizing individual blocks

You can give a single block more visual weight by letting it span more than one column. These per-block sizes are stored separately from the section's column count.

To clear all of them at once, use the Reset block sizes button in the Layout panel — it returns every block in the section to the default single-column width. The button is disabled when no block has a custom size.

Reordering blocks

In edit mode, drag any block to a new position. A floating preview follows your cursor and the grid reflows as you move. Text blocks have a drag area along their top edge, so you can still click into the middle to select and format text.

Going live

Changes you make in the Layout panel save automatically. To see the section exactly as visitors will, click Stop Editing in the top bar (or the Preview pencil icon in the floating toolbar). They appear on your published site within a few seconds of saving.