Jump to content

Gallery Grid - 1 and 2 column layout

Go to solution Solved by tuanphan,

Recommended Posts

Hello, 

I'm trying to create a grid gallery, with portrait images, however each 5th image will be landscape, so I want it to take up 2 columns (see the design attached). 

I've tried to achieve the effect using the below code: 
 

.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery-design-grid-slide:nth-child(5){
    width: 66.66666667%;
  
}
.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery-design-grid-slide:nth-child(6) {
  clear: left;
}

Which seems to half work. My issue is that the height on the 5th image is now too much (perhaps due to the aspect ratio of the gallery?

Is there a way to ensure the 5th image has the same height has the row, and then in the next row, the images appear again in 3 columns?

My site for reference:

https://mcshanetest.squarespace.com/work/lava-kingston
password: bandit

Many thanks

1440 x 745 px Desktop - Individual Project.jpg

Link to comment
  • Replies 4
  • Views 641
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thank you @tuanphan

I added that code, which works great for the image height, but now i have a large gap after the 6th image, and the 7th image doesn't start until the next row (see screenshot attached). Any way to fix that so there are no gaps in the grid, and all the image sit next to each other?

Thanks

Screenshot 2024-06-01 at 4.35.10 pm.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.