[Share code] Gallery Section - Grid - Custom Layout

tuanphan · August 10, 2023

Custom CSS code to customize Gallery Section Grid. Add code to Design > Custom CSS or Website > Website Tools > Custom CSS

Style 1.

First you need to set Gallery Section: Grid to 2 columns

Next, use this code to Custom CSS box

figure.gallery-grid-item:nth-child(3n+1) {
    grid-column: ~"1 / 3" !important;
}
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

Style 2.

Change to 2 columns then use CSS code

figure.gallery-grid-item:nth-child(3n+3) {
    grid-column: ~"1 / 3" !important;
}
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

Style 3

Change to 2 columns then use CSS code

figure.gallery-grid-item:nth-child(5n+1) {
    grid-column: ~"1 / 3" !important;
}
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

Style 4

Change to 2 columns then use CSS code

figure.gallery-grid-item:nth-child(5n+5) {
    grid-column: ~"1 / 3" !important;
}
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

Style 5

Change to 3 columns then use CSS code (code for 60 images)

/* portfolio custom layout */
div#gridThumbs {
    grid-template-columns: repeat(3,minmax(0,1fr));
   
}
/* item 1 - Large */
figure.gallery-grid-item:nth-child(1) {
    grid-column: ~"1 / 3" !important;
    grid-row: ~"1 / 3" !important;
}
/* Item 6 - Large */
figure.gallery-grid-item:nth-child(6) {
    grid-column: ~"2 / 4";
    grid-row: ~"3 / 5";
}
/* Item 7 - Large */
figure.gallery-grid-item:nth-child(7) {
    grid-column: ~"1 / 3";
    grid-row: ~"5 / 7";
}
/* Item 12 - Large */
figure.gallery-grid-item:nth-child(12) {
    grid-column: ~"2 / 4";
    grid-row: ~"7 / 9";
}
/* Item 13 - Large */
figure.gallery-grid-item:nth-child(13) {
    grid-column: ~"1 / 3";
    grid-row: ~"9 / 11";
}
/* Item 18 - Large */
figure.gallery-grid-item:nth-child(18) {
    grid-column: ~"2 / 4";
    grid-row: ~"11 / 13";
}
/* Item 19 - Large */
figure.gallery-grid-item:nth-child(19) {
    grid-column: ~"1 / 3";
    grid-row: ~"13 / 15";
}
/* Item 24 - Large */
figure.gallery-grid-item:nth-child(24) {
    grid-column: ~"2 / 4";
    grid-row: ~"15 / 17";
}
/* Item 25 - Large */
figure.gallery-grid-item:nth-child(25) {
    grid-column: ~"1 / 3";
    grid-row: ~"17 / 19";
}
/* Item 30 - Large */
figure.gallery-grid-item:nth-child(30) {
    grid-column: ~"2 / 4";
    grid-row: ~"19 / 21";
}
/* Item 31 - Large */
figure.gallery-grid-item:nth-child(31) {
    grid-column: ~"1 / 3";
    grid-row: ~"21 / 23";
}
/* Item 36 - Large */
figure.gallery-grid-item:nth-child(36) {
    grid-column: ~"2 / 4";
    grid-row: ~"23 / 25";
}
/* Item 37 - Large */
figure.gallery-grid-item:nth-child(37) {
    grid-column: ~"1 / 3";
    grid-row: 25 / 27;
}
/* Item 42 - Large */
figure.gallery-grid-item:nth-child(42) {
    grid-column: ~"2 / 4";
    grid-row: ~"27 / 29";
}
/* Item 43 - Large */
figure.gallery-grid-item:nth-child(43) {
    grid-column: ~"1 / 3";
    grid-row: ~"29 / 31";
}
/* Item 48 - Large */
figure.gallery-grid-item:nth-child(48) {
    grid-column: ~"2 / 4";
    grid-row: ~"31 / 33";
}
/* Item 49 - Large */
figure.gallery-grid-item:nth-child(49) {
    grid-column: ~"1 / 3";
    grid-row: ~"33 / 35";
}
/* Item 54 - Large */
figure.gallery-grid-item:nth-child(54) {
    grid-column: ~"2 / 4";
    grid-row: ~"35 / 37";
}
/* Item 55 - Large */
figure.gallery-grid-item:nth-child(55) {
    grid-column: ~"1 / 3";
    grid-row: ~"37 / 39";
}
/* Item 60 - Large */
figure.gallery-grid-item:nth-child(60) {
    grid-column: ~"2 / 4";
    grid-row: ~"39 / 41";
}

Style 6

Change to 4 columns then use CSS code

figure.gallery-grid-item:nth-child(5n+3) {
    grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(5n - 1) {
    grid-column: ~"1 / 4" !important;
}
div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important; 
    height: 100%;
}
.gallery-grid-item img {
    position: static !important;
}

Style 7

Change to 3 columns then use CSS code

figure.gallery-grid-item:nth-child(4n-3) {
    grid-column: ~"1 / 3" !important;
}
figure.gallery-grid-item:nth-child(4n) {
    grid-column: ~"2 / 4" !important;
}
div.gallery-grid-wrapper {
   grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.5fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important; 
    height: 100%;
}
.gallery-grid-item img {
    position: static !important;
}

If you have problems with code, just comment below with site url, I can help easier

tuanphan · August 13, 2023

Style 8.

First, change Gallery Section Grid to 4 columns

Next, use CSS code (code for 60 items)

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 9.

Change Grid to 4 columns then use CSS code

figure.gallery-grid-item:nth-child(7n - 6), figure.gallery-grid-item:nth-child(7n - 4)   {
    grid-column: ~"1 / 3" !important;       
}  
figure.gallery-grid-item:nth-child(7n - 5)  {
    grid-column: ~"3 / 5" !important;       
} 
figure.gallery-grid-item:nth-child(7n-1) {
    grid-column: ~"1 / 4" !important;       
} 
div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(12,minmax(0,0.5fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important; 
    height: 100%;
}
.gallery-grid-item img {
    position: static !important;
}

Style 10.

Change Grid to 3 columns, then use CSS code

figure.gallery-grid-item:nth-child(4n-3) {
    grid-column: ~"1 / 4" !important;       
} 
div.gallery-grid-wrapper {
   grid-template-columns: repeat(3,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;
}

Style 11.

Change Grid to 3 columns then use CSS code

figure.gallery-grid-item:nth-child(4n) {
    grid-column: ~"1 / 4" !important;       
} 
div.gallery-grid-wrapper {
   grid-template-columns: repeat(3,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;
}

Style 12.

Change Grid to 3 columns then use CSS code

figure.gallery-grid-item:nth-child(7n-6) {
    grid-column: ~"1 / 4" !important;       
} 
div.gallery-grid-wrapper {
   grid-template-columns: repeat(3,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;
}

tuanphan · August 21, 2023

Style 13

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

Next use CSS code

div.gallery-grid-wrapper {
   grid-template-columns: repeat(9,minmax(0,1fr)) !important;
   grid-template-rows: repeat(10,minmax(0,0.5fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important; 
    height: 100%;
}
.gallery-grid-item img {
    position: static !important;
}
figure.gallery-grid-item:nth-child(6n - 5)  {
    grid-column: ~"1 / 4" !important;       
} 
figure.gallery-grid-item:nth-child(6n - 4)  {
    grid-column: ~"4 / 7" !important;       
}  
figure.gallery-grid-item:nth-child(6n - 3)  {
    grid-column: ~"7 / 10" !important;       
}  
figure.gallery-grid-item:nth-child(6n - 2)  {
    grid-column: ~"1 / 2" !important;       
}  
figure.gallery-grid-item:nth-child(6n - 1)  {
    grid-column: ~"2 / 9" !important;       
}  
figure.gallery-grid-item:nth-child(6n)  {
    grid-column: ~"9 / 10" !important;       
}

Style 14

First, change Gallery to 3 columns, then use CSS code

div.gallery-grid-wrapper {
   grid-template-columns: repeat(3,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 / 3" !important;     
     grid-row: ~"1 / 3" !important;     
}  
figure.gallery-grid-item:nth-child(4) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"3 / 5" !important;     
} 
figure.gallery-grid-item:nth-child(5) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"3 / 5" !important;     
} 
figure.gallery-grid-item:nth-child(8) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"5 / 7" !important;     
}  
figure.gallery-grid-item:nth-child(11) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"7 / 9" !important;     
} 
figure.gallery-grid-item:nth-child(12)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"7 / 9" !important;     
}
    figure.gallery-grid-item:nth-child(15) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"9 / 11" !important;     
}  
figure.gallery-grid-item:nth-child(18) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"11 / 13" !important;     
} 
figure.gallery-grid-item:nth-child(19) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"11 / 13" !important;     
} 
figure.gallery-grid-item:nth-child(22) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"13 / 15" !important;     
}  
figure.gallery-grid-item:nth-child(25) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"15 / 17" !important;     
} 
figure.gallery-grid-item:nth-child(26)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"15 / 17" !important;     
}
figure.gallery-grid-item:nth-child(29) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"17 / 19" !important;     
}  
figure.gallery-grid-item:nth-child(32) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"19 / 21" !important;     
} 
figure.gallery-grid-item:nth-child(33) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"19 / 21" !important;     
} 
figure.gallery-grid-item:nth-child(36) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"21 / 23" !important;     
}  
figure.gallery-grid-item:nth-child(39) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"23 / 25" !important;     
} 
figure.gallery-grid-item:nth-child(40)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"23 / 25" !important;     
}
    figure.gallery-grid-item:nth-child(43) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"25 / 27" !important;     
}  
figure.gallery-grid-item:nth-child(46) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"27 / 29" !important;     
} 
figure.gallery-grid-item:nth-child(47) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"27 / 29" !important;     
} 
figure.gallery-grid-item:nth-child(50) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"29 / 31" !important;     
}  
figure.gallery-grid-item:nth-child(53) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"31 / 33" !important;     
} 
figure.gallery-grid-item:nth-child(54)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"31 / 33" !important;     
}
figure.gallery-grid-item:nth-child(57) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"33 / 35" !important;     
}  
figure.gallery-grid-item:nth-child(60) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"35 / 37" !important;     
}

Style 15

Change Gallery to 3 columns then use CSS code

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

tuanphan · September 5, 2023

Style 16

Change Grid to 4 columns then use CSS code

div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: repeat(36,minmax(0,0.2fr)) !important;
}
.gallery-grid-item-wrapper {
    padding-bottom: 0 !important;
    height: 100%;
}
.gallery-grid-item img {
    position: static;
}
figure.gallery-grid-item:nth-child(5n+1)  {
    grid-column: ~"1 / 3" !important;       
} 
figure.gallery-grid-item:nth-child(5n+2)  {
    grid-column: ~"3 / 5" !important;       
} 
figure.gallery-grid-item:nth-child(5n+4)  {
    grid-column: ~"2 / 5" !important;       
} 
figure.gallery-grid-item:nth-child(5n)  {
    grid-column: ~"1 / 5" !important;       
}

Style 17

Change Grid to 2 columns then use CSS

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

Style 18

Change Grid to 3 columns then use CSS

div.gallery-grid-wrapper {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: repeat(36,minmax(0,0.5fr)) !important;
 }
 .gallery-grid-item-wrapper {
     padding-bottom: 0 !important; 
     height: 100%;
 }
 .gallery-grid-item img {
     position: static !important;
 }
 figure.gallery-grid-item:nth-child(4n+1)  {
     grid-column: ~"1 / 3" !important;       
 } 
 figure.gallery-grid-item:nth-child(2)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"1 / 3" !important;  
 } 
 figure.gallery-grid-item:nth-child(6)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"3 / 5" !important;  
 } 
 figure.gallery-grid-item:nth-child(10)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"5 / 7" !important;  
 } 
 figure.gallery-grid-item:nth-child(14)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"7 / 9" !important;  
 } 
 figure.gallery-grid-item:nth-child(18)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"9 / 11" !important;  
 }
 figure.gallery-grid-item:nth-child(22)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"11 / 13" !important;  
 } 
 figure.gallery-grid-item:nth-child(26)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"13 / 15" !important;  
 } 
 figure.gallery-grid-item:nth-child(30)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"15 / 17" !important;  
 } 
 figure.gallery-grid-item:nth-child(34)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"17 / 19" !important;  
 } 
 figure.gallery-grid-item:nth-child(38)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"19 / 21" !important;  
 }
 figure.gallery-grid-item:nth-child(42)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"21 / 23" !important;  
 } 
 figure.gallery-grid-item:nth-child(46)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"23 / 25" !important;  
 } 
 figure.gallery-grid-item:nth-child(50)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"25 / 27" !important;  
 } 
 figure.gallery-grid-item:nth-child(54)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"27 / 29" !important;  
 } 
 figure.gallery-grid-item:nth-child(58)  {
     grid-column: ~"3 / 4" !important;  
      grid-row: ~"29 / 31" !important;  
 }

Style 19

Change Grid to 6 columns then use CSS

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

Style 20

Change Grid to 4 columns then use CSS code

div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: repeat(35,minmax(0,0.5fr)) !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 / 3" !important;
 } 
figure.gallery-grid-item:nth-child(6)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"3 / 5" !important;
 } 
figure.gallery-grid-item:nth-child(7)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"3 / 5" !important;
 } 
figure.gallery-grid-item:nth-child(8)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"5 / 7" !important;
 } 
figure.gallery-grid-item:nth-child(13)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"7 / 9" !important;
 } 
figure.gallery-grid-item:nth-child(14)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"7 / 9" !important;
 }
figure.gallery-grid-item:nth-child(15)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"9 / 11" !important;
 } 
figure.gallery-grid-item:nth-child(20)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"11 / 13" !important;
 } 
figure.gallery-grid-item:nth-child(21)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"11 / 13" !important;
 } 
figure.gallery-grid-item:nth-child(22)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"13 / 15" !important;
 } 
figure.gallery-grid-item:nth-child(27)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"15 / 17" !important;
 } 
figure.gallery-grid-item:nth-child(28)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"15 / 17" !important;
 }
figure.gallery-grid-item:nth-child(29)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"17 / 19" !important;
 } 
figure.gallery-grid-item:nth-child(34)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"19 / 21" !important;
 } 
figure.gallery-grid-item:nth-child(35)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"19 / 21" !important;
 } 
figure.gallery-grid-item:nth-child(36)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"21 / 23" !important;
 } 
figure.gallery-grid-item:nth-child(41)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"23 / 25" !important;
 } 
figure.gallery-grid-item:nth-child(42)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"23 / 25" !important;
 }
figure.gallery-grid-item:nth-child(43)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"25 / 27" !important;
 } 
figure.gallery-grid-item:nth-child(48)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"27 / 29" !important;
 } 
figure.gallery-grid-item:nth-child(49)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"27 / 29" !important;
 } 
figure.gallery-grid-item:nth-child(50)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"29 / 31" !important;
 } 
figure.gallery-grid-item:nth-child(55)  {
     grid-column: ~"1 / 4" !important;  
     grid-row: ~"31 / 33" !important;
 } 
figure.gallery-grid-item:nth-child(56)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"31 / 33" !important;
 }
figure.gallery-grid-item:nth-child(57)  {
     grid-column: ~"1 / 3" !important;  
     grid-row: ~"33 / 35" !important;
 }

tuanphan · September 5, 2023

Style 21

Change Grid to 5 columns then use CSS code

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

Style 22

Change Grid to 2 columns then use CSS code

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 23

Change Grid to 6 Columns then use CSS code

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

Style 24

Change Grid to 4 columns then use CSS code

div.gallery-grid-wrapper {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
     grid-template-rows: repeat(25,minmax(0,0.4fr)) !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 / 2" !important;  
     grid-row: ~"1 / 4" !important
 } 
 figure.gallery-grid-item:nth-child(2)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"1 / 2" !important
 } 
 figure.gallery-grid-item:nth-child(8)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"2 / 4" !important
 } 
 figure.gallery-grid-item:nth-child(9)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"4 / 7" !important
 } 
 figure.gallery-grid-item:nth-child(10)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"4 / 5" !important
 } 
 figure.gallery-grid-item:nth-child(16)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"5 / 7" !important
 } 
 figure.gallery-grid-item:nth-child(17)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"7 / 10" !important
 } 
 figure.gallery-grid-item:nth-child(18)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"7 / 8" !important
 } 
 figure.gallery-grid-item:nth-child(24)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"8 / 10" !important
 } 
 figure.gallery-grid-item:nth-child(25)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"10 / 13" !important
 } 
 figure.gallery-grid-item:nth-child(26)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"10 / 11" !important
 } 
 figure.gallery-grid-item:nth-child(32)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"11 / 13" !important
 } 
 figure.gallery-grid-item:nth-child(33)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"13 / 16" !important
 } 
 figure.gallery-grid-item:nth-child(34)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"13 / 14" !important
 } 
 figure.gallery-grid-item:nth-child(40)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"14 / 16" !important
 } 
 figure.gallery-grid-item:nth-child(41)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"16 / 19" !important
 } 
 figure.gallery-grid-item:nth-child(42)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"16 / 17" !important
 } 
 figure.gallery-grid-item:nth-child(48)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"17 / 19" !important
 } 
 figure.gallery-grid-item:nth-child(49)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"19 / 22" !important
 } 
 figure.gallery-grid-item:nth-child(50)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"19 / 20" !important
 } 
 figure.gallery-grid-item:nth-child(56)  {
     grid-column: ~"4 / 5" !important;  
     grid-row: ~"20 / 22" !important
 } 
 figure.gallery-grid-item:nth-child(57)  {
     grid-column: ~"1 / 2" !important;  
     grid-row: ~"22 / 25" !important
 } 
 figure.gallery-grid-item:nth-child(58)  {
     grid-column: ~"2 / 4" !important;  
     grid-row: ~"22 / 23" !important
 }

Style 26

Change Grid to 5 columns then use CSS code

div.gallery-grid-wrapper {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    grid-template-rows: repeat(20,minmax(0,1fr)) !important;
  }
  .gallery-grid-item-wrapper {
      padding-bottom: 0 !important; 
      height: 100%;
  }
  .gallery-grid-item img {
      position: static !important;
 }
 figure.gallery-grid-item:nth-child(5)  {
     grid-column: ~"3 / 5" !important;     
      grid-row: ~"1 / 3" !important;     
 } 
 figure.gallery-grid-item:nth-child(8)  {
     grid-column: ~"1 / 3" !important;     
      grid-row: ~"3 / 5" !important;     
 } 
 figure.gallery-grid-item:nth-child(19)  {
     grid-column: ~"3 / 5" !important;     
      grid-row: ~"5 / 7" !important;     
 } 
 figure.gallery-grid-item:nth-child(22)  {
     grid-column: ~"1 / 3" !important;     
      grid-row: ~"7 / 9" !important;     
 } 
 figure.gallery-grid-item:nth-child(33)  {
     grid-column: ~"3 / 5" !important;     
      grid-row: ~"9 / 11" !important;     
 } 
 figure.gallery-grid-item:nth-child(36)  {
     grid-column: ~"1 / 3" !important;     
      grid-row: ~"11 / 13" !important;     
 } 
 figure.gallery-grid-item:nth-child(47)  {
     grid-column: ~"3 / 5" !important;     
      grid-row: ~"13 / 15" !important;     
 } 
 figure.gallery-grid-item:nth-child(50)  {
     grid-column: ~"1 / 3" !important;     
      grid-row: ~"15 / 17" !important;     
 } 
 figure.gallery-grid-item:nth-child(57)  {
     grid-column: ~"3 / 5" !important;     
      grid-row: ~"17 / 19" !important;     
 }

BLK · July 29

Hi,

Is it possible to do 2 in a row then 3 in a row for each column please?

Thank you!

BLK · July 29

^ The above would be for portfolio grid simple please!

tuanphan · August 1

On 7/30/2024 at 2:22 AM, BLK said:

Hi,

Is it possible to do 2 in a row then 3 in a row for each column please?

Thank you!

2

3

2

3

?

and do this for desktop only or desktop + mobile

You can also share link to your portfolio page, I can give exact code easier

BLK · August 2

Yes please! Desktop only.

Edited August 6 by BLK

tuanphan · August 4

On 8/2/2024 at 1:22 PM, BLK said:

Yes please! Desktop only.

https://cylinder-burgundy-2bfe.squarespace.com/portfolio

pass: fantoush

You can use this code to Custom CSS box

@media screen and (min-width:768px) {
div#gridThumbs {
   grid-template-columns: repeat(6,minmax(0,1fr)) !important;
}
div#gridThumbs .grid-item:nth-child(5n+1) {
    grid-column: ~"1 / 4" !important;       
} 
div#gridThumbs .grid-item:nth-child(5n+2) {
    grid-column: ~"4 / 7" !important;
} 
div#gridThumbs .grid-item:nth-child(5n+3) {
    grid-column: ~"1 / 3" !important;
} 
div#gridThumbs .grid-item:nth-child(5n+4) {
    grid-column: ~"3 / 5" !important;
} 
div#gridThumbs .grid-item:nth-child(5n+5) {
    grid-column: ~"5 / 7" !important;
}}

BLK · August 8

Thank you for this, they are not equal in height, is there anyway to get the height the same please? 4:3.

Thank you!

BLK · August 8

Figured this out! Just needed to set the columns to 3. Thanks for the help!

[Share code] Gallery Section - Grid - Custom Layout

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources