Buy me a coffee

Gallery Section: Grid #15

portfolio15-min

How to

#1. First you need to set Gallery Section: Grid to 3 columns. If you can’t set 9, just set 6 columns

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

div.gallery-grid-wrapper {
   grid-template-columns: repeat(3,minmax(0,1fr)) !important;
   grid-template-rows: repeat(60,minmax(0,0.2fr)) !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 / 4" !important;       
     grid-row: ~"1 / 3" !important;   
} 
 figure.gallery-grid-item:nth-child(2)  {
    grid-column: ~"1 / 2" !important;       
     grid-row: ~"3 / 6" !important;   
} 
 figure.gallery-grid-item:nth-child(3)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(4)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(5)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(6)  {
     grid-column: ~"1 / 4" !important;       
     grid-row: ~"6 / 8" !important;     
} 
 figure.gallery-grid-item:nth-child(7)  {
     grid-column: ~"1 / 2" !important;       
     grid-row: ~"8 / 11" !important;     
} 
 figure.gallery-grid-item:nth-child(8)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(9)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(10)  {
    grid-column: ~"2 / 4" !important;         
}
 figure.gallery-grid-item:nth-child(11)  {
    grid-column: ~"1 / 4" !important;       
     grid-row: ~"11 / 13" !important;   
} 
 figure.gallery-grid-item:nth-child(12)  {
    grid-column: ~"1 / 2" !important;       
     grid-row: ~"13 / 16" !important;   
} 
 figure.gallery-grid-item:nth-child(13)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(14)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(15)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(16)  {
     grid-column: ~"1 / 4" !important;       
     grid-row: ~"16 / 18" !important;     
} 
 figure.gallery-grid-item:nth-child(17)  {
     grid-column: ~"1 / 2" !important;       
     grid-row: ~"18 / 21" !important;     
} 
 figure.gallery-grid-item:nth-child(18)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(19)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(20)  {
    grid-column: ~"2 / 4" !important;         
}
 figure.gallery-grid-item:nth-child(21)  {
    grid-column: ~"1 / 4" !important;       
     grid-row: ~"21 / 23" !important;   
} 
 figure.gallery-grid-item:nth-child(22)  {
    grid-column: ~"1 / 2" !important;       
     grid-row: ~"23 / 26" !important;   
} 
 figure.gallery-grid-item:nth-child(23)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(24)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(25)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(26)  {
     grid-column: ~"1 / 4" !important;       
     grid-row: ~"26 / 28" !important;     
} 
 figure.gallery-grid-item:nth-child(27)  {
     grid-column: ~"1 / 2" !important;       
     grid-row: ~"28 / 31" !important;     
} 
 figure.gallery-grid-item:nth-child(28)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(29)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(30)  {
    grid-column: ~"2 / 4" !important;         
}
 figure.gallery-grid-item:nth-child(31)  {
    grid-column: ~"1 / 4" !important;       
     grid-row: ~"31 / 33" !important;   
} 
 figure.gallery-grid-item:nth-child(32)  {
    grid-column: ~"1 / 2" !important;       
     grid-row: ~"33 / 36" !important;   
} 
 figure.gallery-grid-item:nth-child(33)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(34)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(35)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(36)  {
     grid-column: ~"1 / 4" !important;       
     grid-row: ~"36 / 38" !important;     
} 
 figure.gallery-grid-item:nth-child(37)  {
     grid-column: ~"1 / 2" !important;       
     grid-row: ~"38 / 41" !important;     
} 
 figure.gallery-grid-item:nth-child(38)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(39)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(40)  {
    grid-column: ~"2 / 4" !important;         
}
 figure.gallery-grid-item:nth-child(41)  {
    grid-column: ~"1 / 4" !important;       
     grid-row: ~"41 / 43" !important;   
} 
 figure.gallery-grid-item:nth-child(42)  {
    grid-column: ~"1 / 2" !important;       
     grid-row: ~"43 / 46" !important;   
} 
 figure.gallery-grid-item:nth-child(43)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(44)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(45)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(46)  {
     grid-column: ~"1 / 4" !important;       
     grid-row: ~"46 / 48" !important;     
} 
 figure.gallery-grid-item:nth-child(47)  {
     grid-column: ~"1 / 2" !important;       
     grid-row: ~"48 / 51" !important;     
} 
 figure.gallery-grid-item:nth-child(48)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(49)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(50)  {
    grid-column: ~"2 / 4" !important;         
}
 figure.gallery-grid-item:nth-child(51)  {
    grid-column: ~"1 / 4" !important;       
     grid-row: ~"51 / 53" !important;   
} 
 figure.gallery-grid-item:nth-child(52)  {
    grid-column: ~"1 / 2" !important;       
     grid-row: ~"53 / 56" !important;   
} 
 figure.gallery-grid-item:nth-child(53)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(54)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(55)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(56)  {
     grid-column: ~"1 / 4" !important;       
     grid-row: ~"56 / 58" !important;     
} 
 figure.gallery-grid-item:nth-child(57)  {
     grid-column: ~"1 / 2" !important;       
     grid-row: ~"58 / 61" !important;     
} 
 figure.gallery-grid-item:nth-child(58)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(59)  {
    grid-column: ~"2 / 4" !important;         
} 
 figure.gallery-grid-item:nth-child(60)  {
    grid-column: ~"2 / 4" !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(3,minmax(0,1fr)) !important;
   grid-template-rows: repeat(60,minmax(0,0.2fr)) !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 / 4 !important;       
     grid-row: 1 / 3 !important;   
} 
 figure.gallery-grid-item:nth-child(2)  {
    grid-column: 1 / 2 !important;       
     grid-row: 3 / 6 !important;   
} 
 figure.gallery-grid-item:nth-child(3)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(4)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(5)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(6)  {
     grid-column: 1 / 4 !important;       
     grid-row: 6 / 8 !important;     
} 
 figure.gallery-grid-item:nth-child(7)  {
     grid-column: 1 / 2 !important;       
     grid-row: 8 / 11 !important;     
} 
 figure.gallery-grid-item:nth-child(8)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(9)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(10)  {
    grid-column: 2 / 4 !important;         
}
 figure.gallery-grid-item:nth-child(11)  {
    grid-column: 1 / 4 !important;       
     grid-row: 11 / 13 !important;   
} 
 figure.gallery-grid-item:nth-child(12)  {
    grid-column: 1 / 2 !important;       
     grid-row: 13 / 16 !important;   
} 
 figure.gallery-grid-item:nth-child(13)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(14)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(15)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(16)  {
     grid-column: 1 / 4 !important;       
     grid-row: 16 / 18 !important;     
} 
 figure.gallery-grid-item:nth-child(17)  {
     grid-column: 1 / 2 !important;       
     grid-row: 18 / 21 !important;     
} 
 figure.gallery-grid-item:nth-child(18)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(19)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(20)  {
    grid-column: 2 / 4 !important;         
}
 figure.gallery-grid-item:nth-child(21)  {
    grid-column: 1 / 4 !important;       
     grid-row: 21 / 23 !important;   
} 
 figure.gallery-grid-item:nth-child(22)  {
    grid-column: 1 / 2 !important;       
     grid-row: 23 / 26 !important;   
} 
 figure.gallery-grid-item:nth-child(23)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(24)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(25)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(26)  {
     grid-column: 1 / 4 !important;       
     grid-row: 26 / 28 !important;     
} 
 figure.gallery-grid-item:nth-child(27)  {
     grid-column: 1 / 2 !important;       
     grid-row: 28 / 31 !important;     
} 
 figure.gallery-grid-item:nth-child(28)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(29)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(30)  {
    grid-column: 2 / 4 !important;         
}
 figure.gallery-grid-item:nth-child(31)  {
    grid-column: 1 / 4 !important;       
     grid-row: 31 / 33 !important;   
} 
 figure.gallery-grid-item:nth-child(32)  {
    grid-column: 1 / 2 !important;       
     grid-row: 33 / 36 !important;   
} 
 figure.gallery-grid-item:nth-child(33)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(34)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(35)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(36)  {
     grid-column: 1 / 4 !important;       
     grid-row: 36 / 38 !important;     
} 
 figure.gallery-grid-item:nth-child(37)  {
     grid-column: 1 / 2 !important;       
     grid-row: 38 / 41 !important;     
} 
 figure.gallery-grid-item:nth-child(38)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(39)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(40)  {
    grid-column: 2 / 4 !important;         
}
 figure.gallery-grid-item:nth-child(41)  {
    grid-column: 1 / 4 !important;       
     grid-row: 41 / 43 !important;   
} 
 figure.gallery-grid-item:nth-child(42)  {
    grid-column: 1 / 2 !important;       
     grid-row: 43 / 46 !important;   
} 
 figure.gallery-grid-item:nth-child(43)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(44)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(45)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(46)  {
     grid-column: 1 / 4 !important;       
     grid-row: 46 / 48 !important;     
} 
 figure.gallery-grid-item:nth-child(47)  {
     grid-column: 1 / 2 !important;       
     grid-row: 48 / 51 !important;     
} 
 figure.gallery-grid-item:nth-child(48)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(49)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(50)  {
    grid-column: 2 / 4 !important;         
}
 figure.gallery-grid-item:nth-child(51)  {
    grid-column: 1 / 4 !important;       
     grid-row: 51 / 53 !important;   
} 
 figure.gallery-grid-item:nth-child(52)  {
    grid-column: 1 / 2 !important;       
     grid-row: 53 / 56 !important;   
} 
 figure.gallery-grid-item:nth-child(53)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(54)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(55)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(56)  {
     grid-column: 1 / 4 !important;       
     grid-row: 56 / 58 !important;     
} 
 figure.gallery-grid-item:nth-child(57)  {
     grid-column: 1 / 2 !important;       
     grid-row: 58 / 61 !important;     
} 
 figure.gallery-grid-item:nth-child(58)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(59)  {
    grid-column: 2 / 4 !important;         
} 
 figure.gallery-grid-item:nth-child(60)  {
    grid-column: 2 / 4 !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