Buy me a coffee

Free answer within 24 hours. Send your questions now ->

Gallery Section: Grid #8

gallery-section-grid8-min

How to

#1. First you need to set Gallery Section: Grid to 4 columns

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

div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: repeat(10,minmax(0,0.3fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important; 
    height: 100%;
}
.gallery-grid-item img {
    position: static !important;
}
figure.gallery-grid-item:nth-child(1) {
    grid-column: ~"1 / 5" !important;       
}  
figure.gallery-grid-item:nth-child(2) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"2 / 4";       
}
figure.gallery-grid-item:nth-child(4) {
    grid-column: ~"3 / 5" !important;     
}
figure.gallery-grid-item:nth-child(5) {
    grid-column: ~"2 / 5" !important;     
}
figure.gallery-grid-item:nth-child(6) {
    grid-column: ~"1 / 5" !important;      
}   
figure.gallery-grid-item:nth-child(7) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"5 / 7";     
}
figure.gallery-grid-item:nth-child(9) {
    grid-column: ~"3 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(10) {
    grid-column: ~"2 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(11) {
    grid-column: ~"1 / 5" !important;       
}  
figure.gallery-grid-item:nth-child(12) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"8 / 10";       
}
figure.gallery-grid-item:nth-child(14) {
    grid-column: ~"3 / 5" !important;     
}
figure.gallery-grid-item:nth-child(15) {
    grid-column: ~"2 / 5" !important;     
}
figure.gallery-grid-item:nth-child(16) {
    grid-column: ~"1 / 5" !important;      
}   
figure.gallery-grid-item:nth-child(17) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"11 / 13";       
}
figure.gallery-grid-item:nth-child(19) {
    grid-column: ~"3 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(20) {
    grid-column: ~"2 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(21) {
    grid-column: ~"1 / 5" !important;       
}  
figure.gallery-grid-item:nth-child(22) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"14 / 16";
        
}
figure.gallery-grid-item:nth-child(24) {
    grid-column: ~"3 / 5" !important;     
}
figure.gallery-grid-item:nth-child(25) {
    grid-column: ~"2 / 5" !important;     
}
figure.gallery-grid-item:nth-child(26) {
    grid-column: ~"1 / 5" !important;      
}   
figure.gallery-grid-item:nth-child(27) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"17 / 19";       
}
figure.gallery-grid-item:nth-child(29) {
    grid-column: ~"3 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(30) {
    grid-column: ~"2 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(31) {
    grid-column: ~"1 / 5" !important;       
}  
figure.gallery-grid-item:nth-child(32) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"20 / 22";
        
}
figure.gallery-grid-item:nth-child(34) {
    grid-column: ~"3 / 5" !important;     
}
figure.gallery-grid-item:nth-child(35) {
    grid-column: ~"2 / 5" !important;     
}
figure.gallery-grid-item:nth-child(36) {
    grid-column: ~"1 / 5" !important;      
}   
figure.gallery-grid-item:nth-child(37) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"23 / 25";       
}
figure.gallery-grid-item:nth-child(39) {
    grid-column: ~"3 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(40) {
    grid-column: ~"2 / 5" !important;       
}
figure.gallery-grid-item:nth-child(41) {
    grid-column: ~"1 / 5" !important;       
}  
figure.gallery-grid-item:nth-child(42) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"26 / 28";    
}
figure.gallery-grid-item:nth-child(44) {
    grid-column: ~"3 / 5" !important;     
}
figure.gallery-grid-item:nth-child(45) {
    grid-column: ~"2 / 5" !important;     
}
figure.gallery-grid-item:nth-child(46) {
    grid-column: ~"1 / 5" !important;      
}   
figure.gallery-grid-item:nth-child(47) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"29 / 31";       
}
figure.gallery-grid-item:nth-child(49) {
    grid-column: ~"3 / 5" !important;    
}
figure.gallery-grid-item:nth-child(50) {
    grid-column: ~"2 / 5" !important;
       
}
figure.gallery-grid-item:nth-child(51) {
    grid-column: ~"1 / 5" !important;       
}  
figure.gallery-grid-item:nth-child(52) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"32 / 34";
        
}
figure.gallery-grid-item:nth-child(54) {
    grid-column: ~"3 / 5" !important;     
}
figure.gallery-grid-item:nth-child(55) {
    grid-column: ~"2 / 5" !important;     
}
figure.gallery-grid-item:nth-child(56) {
    grid-column: ~"1 / 5" !important;      
}   
figure.gallery-grid-item:nth-child(57) {
    grid-column: ~"1 / 2" !important;
    grid-row: ~"35 / 37";       
}
figure.gallery-grid-item:nth-child(59) {
    grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(60) {
    grid-column: ~"2 / 5" !important;  
}

Extra

Apply code for specific page

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

<style>
div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: repeat(10,minmax(0,0.3fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important; 
    height: 100%;
}
.gallery-grid-item img {
    position: static !important;
}
figure.gallery-grid-item:nth-child(1) {
    grid-column: 1 / 5 !important;       
}  
figure.gallery-grid-item:nth-child(2) {
    grid-column: 1 / 2 !important;
    grid-row: 2/4
        
}
figure.gallery-grid-item:nth-child(4) {
    grid-column: 3 / 5 !important;     
}
figure.gallery-grid-item:nth-child(5) {
    grid-column: 2 / 5 !important;     
}
figure.gallery-grid-item:nth-child(6) {
    grid-column: 1 / 5 !important;      
}   
figure.gallery-grid-item:nth-child(7) {
    grid-column: 1 / 2 !important;
    grid-row: 5/7;       
}
figure.gallery-grid-item:nth-child(9) {
    grid-column: 3 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(10) {
    grid-column: 2 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(11) {
    grid-column: 1 / 5 !important;       
}  
figure.gallery-grid-item:nth-child(12) {
    grid-column: 1 / 2 !important;
    grid-row: 8/10
        
}
figure.gallery-grid-item:nth-child(14) {
    grid-column: 3 / 5 !important;     
}
figure.gallery-grid-item:nth-child(15) {
    grid-column: 2 / 5 !important;     
}
figure.gallery-grid-item:nth-child(16) {
    grid-column: 1 / 5 !important;      
}   
figure.gallery-grid-item:nth-child(17) {
    grid-column: 1 / 2 !important;
    grid-row: 11/13;       
}
figure.gallery-grid-item:nth-child(19) {
    grid-column: 3 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(20) {
    grid-column: 2 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(21) {
    grid-column: 1 / 5 !important;       
}  
figure.gallery-grid-item:nth-child(22) {
    grid-column: 1 / 2 !important;
    grid-row: 14/16
        
}
figure.gallery-grid-item:nth-child(24) {
    grid-column: 3 / 5 !important;     
}
figure.gallery-grid-item:nth-child(25) {
    grid-column: 2 / 5 !important;     
}
figure.gallery-grid-item:nth-child(26) {
    grid-column: 1 / 5 !important;      
}   
figure.gallery-grid-item:nth-child(27) {
    grid-column: 1 / 2 !important;
    grid-row: 17/19;       
}
figure.gallery-grid-item:nth-child(29) {
    grid-column: 3 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(30) {
    grid-column: 2 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(31) {
    grid-column: 1 / 5 !important;       
}  
figure.gallery-grid-item:nth-child(32) {
    grid-column: 1 / 2 !important;
    grid-row: 20/22
        
}
figure.gallery-grid-item:nth-child(34) {
    grid-column: 3 / 5 !important;     
}
figure.gallery-grid-item:nth-child(35) {
    grid-column: 2 / 5 !important;     
}
figure.gallery-grid-item:nth-child(36) {
    grid-column: 1 / 5 !important;      
}   
figure.gallery-grid-item:nth-child(37) {
    grid-column: 1 / 2 !important;
    grid-row: 23/25;       
}
figure.gallery-grid-item:nth-child(39) {
    grid-column: 3 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(40) {
    grid-column: 2 / 5 !important;       
}
figure.gallery-grid-item:nth-child(41) {
    grid-column: 1 / 5 !important;       
}  
figure.gallery-grid-item:nth-child(42) {
    grid-column: 1 / 2 !important;
    grid-row: 26/28    
}
figure.gallery-grid-item:nth-child(44) {
    grid-column: 3 / 5 !important;     
}
figure.gallery-grid-item:nth-child(45) {
    grid-column: 2 / 5 !important;     
}
figure.gallery-grid-item:nth-child(46) {
    grid-column: 1 / 5 !important;      
}   
figure.gallery-grid-item:nth-child(47) {
    grid-column: 1 / 2 !important;
    grid-row: 29/31;       
}
figure.gallery-grid-item:nth-child(49) {
    grid-column: 3 / 5 !important;    
}
figure.gallery-grid-item:nth-child(50) {
    grid-column: 2 / 5 !important;
       
}
figure.gallery-grid-item:nth-child(51) {
    grid-column: 1 / 5 !important;       
}  
figure.gallery-grid-item:nth-child(52) {
    grid-column: 1 / 2 !important;
    grid-row: 32/34
        
}
figure.gallery-grid-item:nth-child(54) {
    grid-column: 3 / 5 !important;     
}
figure.gallery-grid-item:nth-child(55) {
    grid-column: 2 / 5 !important;     
}
figure.gallery-grid-item:nth-child(56) {
    grid-column: 1 / 5 !important;      
}   
figure.gallery-grid-item:nth-child(57) {
    grid-column: 1 / 2 !important;
    grid-row: 35/37;       
}
figure.gallery-grid-item:nth-child(59) {
    grid-column: 3 / 5 !important;
}
figure.gallery-grid-item:nth-child(60) {
    grid-column: 2 / 5 !important;  
}
</style>

Need a help?

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

Share this post:

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