Custom Portfolio Grid in Unique Layout

I am trying to find the best way to create a custom layout using the new portfolio page in squarespace 7.1 I would like to be able to create a custom grid layout like the attached image, but make it in a way so if I add projects later on I can easily do so. Right now my first step would be actually setting up the grid. Once that is created I don't mind copying code in the future to add projects if necessary. I would just like a way to create a unique grid but can't seem to figure out how with this new squarespace system. Thank you in advance!

Edited March 6 by StephenMooreMotion

Hi,

Can you share link to portfolio page? We can try some code

Hi there sorry for such a late response. Not sure if this is the right link but here is what it looks like now, and looking for a way to organize like the pattern above while still being able to use squarespace's portfolio functions.

 

https://grapefruit-raspberry-lpwh.squarespace.com/portfolio-1

 

On 4/16/2023 at 12:00 AM, StephenMooreMotion said:

Hi there sorry for such a late response. Not sure if this is the right link but here is what it looks like now, and looking for a way to organize like the pattern above while still being able to use squarespace's portfolio functions.

 

https://grapefruit-raspberry-lpwh.squarespace.com/portfolio-1

 

The site is private. Can you setup an access password? We can access easier

 

Yep! My bad I forgot! The password is "password" Thanks for the heads up!

Like this?

--

save for me, don't care

div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}

a.grid-item:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

a.grid-item:nth-child(2), a.grid-item:nth-child(2) .grid-image {
    grid-row: 1 / 3;
    padding-bottom: 114% !important;
}

a.grid-item:nth-child(3) {
    grid-column: 4 / 6;
    grid-row: 1 / 4;
}

a.grid-item:nth-child(4) {
    grid-row: 3 / 5;
}

a.grid-item:nth-child(5) {
    grid-row: 3 / 5;
    grid-column: 2 / 4;
}

a.grid-item:nth-child(6) {
    grid-column: 4 / 6;
    grid-row: 4 / 8;
}

a.grid-item:nth-child(7) {
    grid-column: 1 / 3;
    grid-row: 5 / 8;
}

a.grid-item:nth-child(8) {
    grid-row: 5 / 8;
}

a.grid-item:nth-child(3), a.grid-item:nth-child(3) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(4), a.grid-item:nth-child(4) .grid-image {
    padding-bottom: 114%;
}

a.grid-item:nth-child(8), a.grid-item:nth-child(8) .grid-image {
    padding-bottom: 115%;
}

a.grid-item:nth-child(6), a.grid-item:nth-child(6) .grid-image {
    padding-bottom: 85.5%;
}

 

Wow! Amazing yes that is pretty darn close to what I was hoping for! Would there be any way to make the smaller images/links squares? And would this code have to be adjusted every time I add a project? Or if I simply add a portfolio page will it automatically work and shift everything down? If that makes sense? Also, when I copy the code into "Design>Custom CSS" It doesn't create the same result. Regardless such a huge help already. Thank you so much!

Also, thought I should clarify, just in case it affects the code. I am wanting these to be links (essentially how the "portfolio" system works in squarespace) if possible. Not just images

Add this to Design > Custom CSS

div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}

a.grid-item:nth-child(1) {
    grid-row: ~"1 / 3";
    grid-column: ~"1 / 3";
}

a.grid-item:nth-child(2), a.grid-item:nth-child(2) .grid-image {
    grid-row: ~"1 / 3";
    padding-bottom: 114% !important;
}

a.grid-item:nth-child(3) {
    grid-column: ~"4 / 6";
    grid-row: ~"1 / 4";
}

a.grid-item:nth-child(4) {
    grid-row: ~"3 / 5";
}

a.grid-item:nth-child(5) {
    grid-row: ~"3 / 5";
    grid-column: ~"2 / 4";
}

a.grid-item:nth-child(6) {
    grid-column: ~"4 / 6";
    grid-row: ~"4 / 8";
}

a.grid-item:nth-child(7) {
    grid-column: ~"1 / 3";
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(8) {
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(3), a.grid-item:nth-child(3) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(4), a.grid-item:nth-child(4) .grid-image {
    padding-bottom: 114%;
}

a.grid-item:nth-child(8), a.grid-item:nth-child(8) .grid-image {
    padding-bottom: 115%;
}

a.grid-item:nth-child(6), a.grid-item:nth-child(6) .grid-image {
    padding-bottom: 85.5%;
}

 

Sweet! It worked this time. Definitely more in line with what I was hoping for so thank you so much. Ideally I would still like the smaller windows to be perfect squares so maybe I will try playing with it on my end as I am sure it gets pretty difficult ratio-wise, while trying to keep the grid nice and neat like it is. Probably some crazy math involved haha. I noticed you added padding on some of them to make them fit properly. (Smart idea!) Do you know if there is a way to make the hover effect/titles work along with it? On the images that had padding on them it looks like in the image below, and am hoping to make it fill the image with the text centered. 

On 4/26/2023 at 8:25 AM, tuanphan said:

Add this to Design > Custom CSS

div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}

a.grid-item:nth-child(1) {
    grid-row: ~"1 / 3";
    grid-column: ~"1 / 3";
}

a.grid-item:nth-child(2), a.grid-item:nth-child(2) .grid-image {
    grid-row: ~"1 / 3";
    padding-bottom: 114% !important;
}

a.grid-item:nth-child(3) {
    grid-column: ~"4 / 6";
    grid-row: ~"1 / 4";
}

a.grid-item:nth-child(4) {
    grid-row: ~"3 / 5";
}

a.grid-item:nth-child(5) {
    grid-row: ~"3 / 5";
    grid-column: ~"2 / 4";
}

a.grid-item:nth-child(6) {
    grid-column: ~"4 / 6";
    grid-row: ~"4 / 8";
}

a.grid-item:nth-child(7) {
    grid-column: ~"1 / 3";
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(8) {
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(3), a.grid-item:nth-child(3) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(4), a.grid-item:nth-child(4) .grid-image {
    padding-bottom: 114%;
}

a.grid-item:nth-child(8), a.grid-item:nth-child(8) .grid-image {
    padding-bottom: 115%;
}

a.grid-item:nth-child(6), a.grid-item:nth-child(6) .grid-image {
    padding-bottom: 85.5%;
}

 

Change to this new code

div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}

a.grid-item:nth-child(1) {
    grid-row: ~"1 / 3";
    grid-column: ~"1 / 3";
}

a.grid-item:nth-child(2), a.grid-item:nth-child(2) .grid-image {
    grid-row: ~"1 / 3";
    padding-bottom: 114% !important;
}

a.grid-item:nth-child(3) {
    grid-column: ~"4 / 6";
    grid-row: ~"1 / 4";
}

a.grid-item:nth-child(4) {
    grid-row: ~"3 / 5";
}

a.grid-item:nth-child(5) {
    grid-row: ~"3 / 5";
    grid-column: ~"2 / 4";
}

a.grid-item:nth-child(6) {
    grid-column: ~"4 / 6";
    grid-row: ~"4 / 8";
}

a.grid-item:nth-child(7) {
    grid-column: ~"1 / 3";
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(8) {
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(3), a.grid-item:nth-child(3) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(4), a.grid-item:nth-child(4) .grid-image {
    padding-bottom: 114% !important;
}

a.grid-item:nth-child(8), a.grid-item:nth-child(8) .grid-image {
    padding-bottom: 115% !important;
}

a.grid-item:nth-child(6), a.grid-item:nth-child(6) .grid-image {
    padding-bottom: 85.5% !important;
}

 

Works like a charm! Thank you! The only other thing I can think of at the moment...is there a way to disable the hover effect and the link effects for specific images? For example, I am looking to have some of these be gifs (which I know I can import as just the image) But if possible, I would like it so that there is no hover title on these specific boxes and them not be clickable if that makes sense? Meaning a majority of my boxes will work as they do know and link to their respective pages with their hovers, and then I can select a few to just have no hover or links.

15 hours ago, StephenMooreMotion said:

Works like a charm! Thank you! The only other thing I can think of at the moment...is there a way to disable the hover effect and the link effects for specific images? For example, I am looking to have some of these be gifs (which I know I can import as just the image) But if possible, I would like it so that there is no hover title on these specific boxes and them not be clickable if that makes sense? Meaning a majority of my boxes will work as they do know and link to their respective pages with their hovers, and then I can select a few to just have no hover or links.

Suppose you want to do this with item 4, 10, 17, you can use this CSS

a.grid-item:nth-child(4), a.grid-item:nth-child(10), a.grid-item:nth-child(17) {
	pointer-events: none;
}

 

Awesome! Perfect! I hate to do this to you but it is so very close. I was taking your code and trying to replicate it with more panels in a similar pattern. I got it very close to how I want it but I ran into a roadblock if you don't mind helping me fix it? If you look at the page, I essentially created 3 panels as a divider and then I tried to replicate the same pattern from before, but flipped. I have the final two rows mostly correct but can't seem to figure out how to move them up and into their place. Please let me know if that makes sense, and if not I am happy to send a picture or video to show you. Thanks again for everything! I truly appreciate it. This should be it once this is fixed!

On 5/1/2023 at 11:42 PM, StephenMooreMotion said:

Awesome! Perfect! I hate to do this to you but it is so very close. I was taking your code and trying to replicate it with more panels in a similar pattern. I got it very close to how I want it but I ran into a roadblock if you don't mind helping me fix it? If you look at the page, I essentially created 3 panels as a divider and then I tried to replicate the same pattern from before, but flipped. I have the final two rows mostly correct but can't seem to figure out how to move them up and into their place. Please let me know if that makes sense, and if not I am happy to send a picture or video to show you. Thanks again for everything! I truly appreciate it. This should be it once this is fixed!

What should it look like on some bottom rows?

So in the image attached below, the left side is what I have currently with the code that I extended. The red is what I have close but I couldn't figure out how to move them up into their place. The right side is what I am looking to have with the two red areas shifted up.

 

 

Here is what the code looks like on my end currently. Not sure how close it is to correct but hopefully it is just a small tweak:

 

div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}

a.grid-item:nth-child(1) {
    grid-row: ~"1 / 3";
    grid-column: ~"1 / 3";
}

a.grid-item:nth-child(2), a.grid-item:nth-child(2) .grid-image {
    grid-row: ~"1 / 3";
    padding-bottom: 113.3% !important;
}

a.grid-item:nth-child(3) {
    grid-column: ~"4 / 6";
    grid-row: ~"1 / 4";
}

a.grid-item:nth-child(4) {
    grid-row: ~"3 / 5";
}

a.grid-item:nth-child(5) {
    grid-row: ~"3 / 5";
    grid-column: ~"2 / 4";
  
}

a.grid-item:nth-child(6) {
    grid-column: ~"4 / 6";
    grid-row: ~"4 / 8";
}

a.grid-item:nth-child(7) {
    grid-column: ~"1 / 3";
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(8) {
    grid-row: ~"5 / 8";
}

a.grid-item:nth-child(9), a.grid-item:nth-child(9) .grid-image {
    grid-row: ~"8 / 8";
    grid-column: ~"1 / 2";
      padding-bottom: 113.3% !important;
}

a.grid-item:nth-child(10), a.grid-item:nth-child(10) .grid-image {
    grid-row: ~"8 / 8";
    grid-column: ~"2/ 5";    
    padding-bottom: 37.45% !important;
}

a.grid-item:nth-child(11), a.grid-item:nth-child(11) .grid-image {
    grid-row: ~"8 / 8";
    grid-column: ~"5 / 5";    
    padding-bottom: 113.3% !important;
}

a.grid-item:nth-child(12) {
  grid-column: ~"1 / 3";    
  grid-row: ~"9 / 9"
}

a.grid-item:nth-child(13), a.grid-item:nth-child(13) .grid-image {
    grid-row: ~"9 / 10";
    grid-column: ~"3 / 3";    
    padding-bottom: 113.3% !important;
}

a.grid-item:nth-child(14) {
    grid-column: ~"4 / 6";
      grid-row: ~"9 / 10"       
}

a.grid-item:nth-child(15) {
    grid-column: ~"3 / 5";
      grid-row: ~"10 / 10"       
}

a.grid-item:nth-child(16), a.grid-item:nth-child(16) .grid-image {
    grid-row: ~"10 / 10";
    grid-column: ~"5 / 5";    
    padding-bottom: 113.3% !important;
}

a.grid-item:nth-child(17) {
  grid-column: ~"1 / 3";    
  grid-row: ~"10 / 11"
}

a.grid-item:nth-child(18), a.grid-item:nth-child(18) .grid-image {
    grid-row: ~"11 / 11";
    grid-column: ~"3 / 3";    
    padding-bottom: 113.3% !important;
}

a.grid-item:nth-child(19) {
    grid-column: ~"4 / 6";
      grid-row: ~"11 / 11"       
}

a.grid-item:nth-child(3), a.grid-item:nth-child(3) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(4), a.grid-item:nth-child(4) .grid-image {
    padding-bottom: 114% !important;
}

a.grid-item:nth-child(8), a.grid-item:nth-child(8) .grid-image {
    padding-bottom: 113.2% !important;
}

a.grid-item:nth-child(6), a.grid-item:nth-child(6) .grid-image {
    padding-bottom: 84.8% !important;
}

a.grid-item:nth-child(12), a.grid-item:nth-child(12) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(17), a.grid-item:nth-child(17) .grid-image {
    padding-bottom: 85% !important;
}

a.grid-item:nth-child(5), a.grid-item:nth-child(9), a.grid-item:nth-child(11) {
    pointer-events: none;
}

Edited May 3 by StephenMooreMotion

Find & edit 12, 15, 16, 17 to this

a.grid-item:nth-child(12) {
    grid-column: ~"1 / 3";
    grid-row: ~"9 / 11";
}
a.grid-item:nth-child(15) {
    grid-column: ~"3 / 5";
    grid-row: ~"10 / 11";
}
a.grid-item:nth-child(16), a.grid-item:nth-child(16) .grid-image {
    grid-row: ~"10 / 11";
    grid-column: ~"5 / 5";
    padding-bottom: 113.3% !important;
}
a.grid-item:nth-child(17), a.grid-item:nth-child(17) .grid-image {
    padding-top: 30% !important;
    padding-bottom: 53.25% !important;
}

That fixed the right boxes for me but unfortunately the big left one didn't work somehow. It also created a gap in the label again. This would be box 17 that is messing up on my end

Add this code under

a.grid-item:nth-child(17), a.grid-item:nth-child(17) .grid-image {
    grid-row: ~"10 / 14";
    grid-column: ~"1 / 3";
}

 

Alright so that fixed the position which is great, but the hover label didn't shift with it unfortunately. (This would still be panel 17)

Don't remove any code

Add this under

a.grid-item:nth-child(17) {
    padding-bottom: 100% !important;
}

 

Alright so that extended the hover effect to the bottom of the panel which is great but it didn't remove it from the upper part. Somehow it is still showing on the panel above when hovered.