Wix Editor: Changing Your Gallery's Layout

5 min read
In this article
  • Choosing the number of rows and columns
  • Resizing your gallery
  • Resizing a gallery with the stretch handles
  • Stretching a gallery to full-width
  • Aligning your gallery image text
  • Displaying landscape and portrait images in a gallery
  • Customizing the layout of a Freestyle gallery
Adjust your gallery's layout to suit your site's alignment. Use options such as the width, spacing, and height to structure and display your images the way you want.
Note:
The available layout options depend on the gallery you choose.

Choosing the number of rows and columns

Decide how many rows and columns you need for your gallery's content. For example, if your gallery contains 9 images, you can set 3 rows and 3 columns to ensure they're displayed evenly.
After choosing the number of rows and columns, you can make the spacing between images bigger or smaller.

To change the number of columns and rows:

  1. Go to your editor.
  2. Click the gallery on your page.
  3. Click the Layout icon .
  4. Drag the sliders to adjust the number of columns, rows and the spacing between the columns / rows.
Screenshot of the Layout panel for a grid gallery. The column, row, and spacing sliders are highlighted.
Note:
Some galleries only contain the Columns option.

Depending on your needs, there are two ways to change the size of your gallery: using the stretch handles to make it bigger or smaller, or stretching it to full width. 
  1. Go to your editor.
  2. Click the gallery on your page.
  3. Click and drag the handles on the gallery's edges to resize it. 
Note:
If you're unable to resize your gallery using the stretch handles, it's probably already set to full width. You can disable this option if needed.
A GIF showing a grid gallery being stretched and resized with the stretch handles.
  1. Go to your editor.
  2. Click the gallery on your page.
  3. Click the Stretch icon .
  4. Click the Stretch to full width toggle: 
    • Enabled: The element is stretched to the full width to fit your screen.
    • Disabled: The element is not stretched to fit your screen.
  5. (Optional) Drag the Margins slider to increase or decrease the space on either side of the gallery.
A screenshot of the Stretch Gallery panel over a gallery in the Editor. The 'Stretch to full width' toggle has been enabled.
Note:
The margin limit for full-width galleries is 80 pixels.

Certain galleries display image titles and / or descriptions to give your visitors extra information or context. You can set the text's position by choosing an alignment from the Layout panel.

To align text in your gallery:

  1. Go to your editor.
  2. Click the gallery on your page.
  3. Click the Layout icon .
  4. Choose an option under Text alignment or How's text aligned?: Left, Center or Right.
A screenshot of the layout panel of a masonry gallery. The cursor is hovering over the option to align the text to the centre

If you have both landscape and portrait mode images in your gallery, you can set the image scaling to 'fit'. This prevents the images from being automatically cropped, so you can display all of your images in their correct orientation.
Before you begin:
Make sure you save and upload the images in the orientation that you want to use (landscape or portrait).

To set image scaling:

  1. Go to your editor.
  2. Click the gallery on your page.
  3. Click the Settings icon .
  4. Choose an option under When they're resized
    • Autocrop: Images are automatically cropped to fit the space, and have the same orientation.
    • Fit: Images are fit into the image space and displayed in their original orientation.
A screenshot of the grid gallery settings panel. The cursor is hovering over the option to set the images to 'Fit'.

Adjust the structure of a Freestyle gallery by setting its display and rotation. You can also randomize the layout for a fresh new look.

To change the layout of a Freestyle gallery:

  1. Go to your editor.
  2. Click the gallery on your page.
  3. Click the Layout icon .
  4. Select a layout option under How are images displayed?:
    • Scattered: Images are scattered randomly in the gallery.
    • Stacked: Images are stacked on top of each other.
  5. Click the toggle next to Rotated to enable or disable image rotation:
    • Enabled: Images are placed at an angle (partially rotated).
    • Disabled: Images are placed horizontally.
  6. (Optional) Click the Randomize Layout button to randomly select a different layout for your gallery images.
A screenshot of the freestyle layout panel. The cursor is hovering over the 'Rotated' toggle.