Jump to content

Custom Portfolio Grid in Unique Layout

Recommended Posts

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!

istockphoto-1194618924-612x612.jpg

Edited by StephenMooreMotion
Link to comment
  • Replies 21
  • Views 914
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Like this?

image.png.ffad3a9ad9800ed964627cc7d76258dc.png

--

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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment

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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 

Screenshot 2023-04-27 100930.png

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
}

WebLayout_Example.png

Edited by StephenMooreMotion
Link to comment

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;
}

image.thumb.png.bc9d9bb6843afbd9c4470fd54fe80263.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.