Buy me a coffee

Custom Portfolio Style 21

portfolio21-min

How to

#1. First you need to set Grid – Simple (or Grid – Overlay) to 5 columns

#2. Next, use this code to Custom CSS box

div#gridThumbs {
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.3fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"1 / 3" !important;
} 
a.grid-item:nth-child(2)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"1 / 2" !important;
} 
a.grid-item:nth-child(3)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"2 / 3" !important;
} 
a.grid-item:nth-child(4)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"3 / 4" !important;
} 

a.grid-item:nth-child(10)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"5 / 7" !important;
} 
a.grid-item:nth-child(11)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"5 / 6" !important;
} 
a.grid-item:nth-child(12)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"6 / 7" !important;
} 
a.grid-item:nth-child(13)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"7 / 8" !important;
} 

a.grid-item:nth-child(19)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"9 / 11" !important;
} 
a.grid-item:nth-child(20)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"9 / 10" !important;
} 
a.grid-item:nth-child(21)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"10 / 11" !important;
} 
a.grid-item:nth-child(22)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"11 / 12" !important;
}
a.grid-item:nth-child(28)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"13 / 15" !important;
} 
a.grid-item:nth-child(29)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"13 / 14" !important;
} 
a.grid-item:nth-child(30)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"14 / 15" !important;
} 
a.grid-item:nth-child(31)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"15 / 16" !important;
} 

a.grid-item:nth-child(37)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"17 / 19" !important;
} 
a.grid-item:nth-child(38)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"17 / 18" !important;
} 
a.grid-item:nth-child(39)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"18 / 19" !important;
} 
a.grid-item:nth-child(40)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"19 / 20" !important;
} 

a.grid-item:nth-child(46)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"21 / 23" !important;
} 
a.grid-item:nth-child(47)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"21 / 22" !important;
} 
a.grid-item:nth-child(48)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"22 / 23" !important;
} 
a.grid-item:nth-child(49)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"23 / 24" !important;
}
a.grid-item:nth-child(55)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"25 / 27" !important;
} 
a.grid-item:nth-child(56)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"25 / 26" !important;
} 
a.grid-item:nth-child(57)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"26 / 27" !important;
} 
a.grid-item:nth-child(58)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"27 / 28" !important;
}

 

Extra

Apply code for specific portfolio page

With Business Plan/Higher, use this code to Page Header

<style>
div#gridThumbs {
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.3fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: 1 / 4 !important;  
    grid-row: 1 / 3 !important;
} 
a.grid-item:nth-child(2)  {
    grid-column: 4 / 6 !important;  
    grid-row: 1 / 2 !important;
} 
a.grid-item:nth-child(3)  {
    grid-column: 4 / 6 !important;  
    grid-row: 2 / 3 !important;
} 
a.grid-item:nth-child(4)  {
    grid-column: 1 / 6 !important;  
    grid-row: 3 / 4 !important;
} 

a.grid-item:nth-child(10)  {
    grid-column: 1 / 4 !important;  
    grid-row: 5 / 7 !important;
} 
a.grid-item:nth-child(11)  {
    grid-column: 4 / 6 !important;  
    grid-row: 5 / 6 !important;
} 
a.grid-item:nth-child(12)  {
    grid-column: 4 / 6 !important;  
    grid-row: 6 / 7 !important;
} 
a.grid-item:nth-child(13)  {
    grid-column: 1 / 6 !important;  
    grid-row: 7 / 8 !important;
} 

a.grid-item:nth-child(19)  {
    grid-column: 1 / 4 !important;  
    grid-row: 9 / 11 !important;
} 
a.grid-item:nth-child(20)  {
    grid-column: 4 / 6 !important;  
    grid-row: 9 / 10 !important;
} 
a.grid-item:nth-child(21)  {
    grid-column: 4 / 6 !important;  
    grid-row: 10 / 11 !important;
} 
a.grid-item:nth-child(22)  {
    grid-column: 1 / 6 !important;  
    grid-row: 11 / 12 !important;
}
a.grid-item:nth-child(28)  {
    grid-column: 1 / 4 !important;  
    grid-row: 13 / 15 !important;
} 
a.grid-item:nth-child(29)  {
    grid-column: 4 / 6 !important;  
    grid-row: 13 / 14 !important;
} 
a.grid-item:nth-child(30)  {
    grid-column: 4 / 6 !important;  
    grid-row: 14 / 15 !important;
} 
a.grid-item:nth-child(31)  {
    grid-column: 1 / 6 !important;  
    grid-row: 15 / 16 !important;
} 

a.grid-item:nth-child(37)  {
    grid-column: 1 / 4 !important;  
    grid-row: 17 / 19 !important;
} 
a.grid-item:nth-child(38)  {
    grid-column: 4 / 6 !important;  
    grid-row: 17 / 18 !important;
} 
a.grid-item:nth-child(39)  {
    grid-column: 4 / 6 !important;  
    grid-row: 18 / 19 !important;
} 
a.grid-item:nth-child(40)  {
    grid-column: 1 / 6 !important;  
    grid-row: 19 / 20 !important;
} 

a.grid-item:nth-child(46)  {
    grid-column: 1 / 4 !important;  
    grid-row: 21 / 23 !important;
} 
a.grid-item:nth-child(47)  {
    grid-column: 4 / 6 !important;  
    grid-row: 21 / 22 !important;
} 
a.grid-item:nth-child(48)  {
    grid-column: 4 / 6 !important;  
    grid-row: 22 / 23 !important;
} 
a.grid-item:nth-child(49)  {
    grid-column: 1 / 6 !important;  
    grid-row: 23 / 24 !important;
}
a.grid-item:nth-child(55)  {
    grid-column: 1 / 4 !important;  
    grid-row: 25 / 27 !important;
} 
a.grid-item:nth-child(56)  {
    grid-column: 4 / 6 !important;  
    grid-row: 25 / 26 !important;
} 
a.grid-item:nth-child(57)  {
    grid-column: 4 / 6 !important;  
    grid-row: 26 / 27 !important;
} 
a.grid-item:nth-child(58)  {
    grid-column: 1 / 6 !important;  
    grid-row: 27 / 28 !important;
} 
</style>

Need a help?

Just send me an email with your site url. I will answer within 24 hours

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder