Gallery Section: Grid #22

portfolio22-min

How to

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