Jump to content

Pinterest style portfolio page / scattered images with CSS

Recommended Posts

Site URL: http://www.giuliomiglietta.com

Hello everybody,

Do you know if there is a CSS way to have a portfolio page using a Pinterest style, staggered image layout?
A bit like what the Matsuya template uses in galleries, with the exception that these should be actual clickable pictures as part of a portfolio page?

I'm using squarespace 7.1 to design my new site and it would be nice to upload images and have them in different ratio on the page.

Thanks a lot!


Screen Shot 2021-01-14 at 13.46.14.png

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

If it were 7.0 I could answer this now, because I already do this on my site using summary blocks. The closet thing to what you want is to add a gallery section to a portfolio page (could be a new portfolio page) set the layout to Grid:masonry, Full Bleed which sets different ratios, enable the lightbox function and each image will be clickable. You can also adjust the spacing between images. All those options on one little panel. 

Link to comment

Thanks @derricksrandomviews It's really as close as it gets via the gallery method. It's not bad but the link opening is a little clunky and I can see the differences of it not being an actual portfolio page. 

Thanks so much for your help, I'll hold on and see if anybody figured it out via CSS. Someone in a separate post suggeste something to do with Grid-column:span 2 and Grid-row-end:span 2 and autocolumn.
But not much else of the code pasted and not much room to pick the subject back up.


Link to comment


This topic is now archived and is closed to further replies.

  • 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.