Learning how to recreate a Pro Gallery

I’m new to Wix Studio and am trying to learn by recreating existing layouts that I have seen.


I’m struggling to recreate this Pro Gallery layout from scratch, ie unable to adjust the height of cells and add gaps between vertically stacked cells. I’ve had a look at CSS grids etc but not sure if that is the right approach. Any advice and tips would be great. Many thanks!

I’m not sure if I’m following correctly - you want to recreate the Pro Gallery layout in another Pro Gallery, or you want to recreate the layout in a Section grid?

Hi - just to recreate how that gallery looks if I was using a Section grid (or using any of the basic tools) - just as an exercise in learning…so I can practice using the tools to create layouts from scratch…thanks!

I find the best way to look at it is “where are the parallel lines” - it helps to figure out direction of columns/rows (in this case, there’s 4 columns).

So - you’ll split the section into 4 columns

Then in each column, split the cell and adjust its size: (I needed to do some splitting and merging of cells)

Then add gaps from the inspector, and images stretched to each cell, and you should be done :slight_smile:

Aaah I never thought of splitting and splitting again, then merging the remaining section…I was just splitting the column once and then trying to drag the dividing line upwards (to create a smaller box at the top). Sodid you also just add a margin between the images that are stacked on top of one another?
Thank you so much

Here’s the steps I took:

Awesome - thanks again.

1 Like