Unfortunately, there is no docs or tutorials available for create such gallery (at least I do not know such), but I can give you more detailed step-by-step instructions and make screencast how I would do this.
Just one detail: do you need to reproduce that scale effect on hover?
Create div inside the Section and give it class “gallery grid”. It will let you easier control gallery (copy/paste).
As we have in the example, we need 3 rows with 3 or 4 columns each. So drag and drop row inside the “gallery grid”.
Every row has 12 proportional sections and automatically build columns depends on quantity of this sections (which you can control). So we will have:
– 1st row = 3 columns: 3 sections, 3 sections and 6 sections.
– 2nd row = 4 columns: 3 sect, 3 sect, 3 sect, 3 sect
– 3rd row = 3 columns: 3 sect, 6 sect, 3 set.
Visually we can see that every column will take about 20% of screen width. So for create square images columns have to have height = width. In this case will use VW measurements ( viewport width), 1 vw = 1 % of width
So give rows class “gallery row”, width= 20vw and a little bit bottom margin
give to every column class “col” and make sure that column height = 100%
put lightbox widget inside the column, give it class “gallery lightbox”, make it display: block and height: 100%
also make it position: relative and overflow: hidden
image inside the lightbox - make class "gallery image, position: absolute, aligning: full, height:100%
Then you can copy/paste lightbox inside every column.
for wide images (which is in the 6 sections column) add combo-class “wide” and give it a bit different settings: width: 100%, height: auto