[Share] Custom Layout - Portfolio Page

tuanphan · August 4, 2023

Some custom layout for Portfolio Page

(Here I use layout: Grid - Overlay. You can use it for Grid - Simple)
If apply all portfolio pages, add code to Custom CSS box
If apply to specific pages, wrap code in <style>paste code here</style> then add code to that Portfolio Page Header

First you need to set Layout to 2 items/row

#1. 1 Large - 2 Small - 1 Large - 2 Small

a.grid-item:nth-child(3n+1) {
    grid-column: ~"1 / 3" !important;
}
/* this code will set mobile to 2 columns to keep layout same as desktop */
div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

#2. 2 small - 1 large - 2 small - 1 large

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

#3. 1 Large - 4 Small (2 rows) - 1 Large - 4 Small (2 rows)

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

#4. 4 Small (2 rows) - 1 Large - 4 Small (2 rows) - 1 Large

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

#5. You need to change to 3 items/row first

(This will require some additional code to adjust ratio of image. This code for 60 items, if you have more, just share url, we will adjust code for your case)

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

Edited August 6, 2023 by tuanphan

tuanphan · August 7, 2023

For both #6 and #7, First you need to set Grid – Simple (or Grid – Overlay) to 4 columns

#6.

Next, use this CSS code

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

#7.

Use this CSS code

/* Portfolio style 7 */
a.grid-item:nth-child(4n - 3) {
    grid-column: ~"1 / 3" !important;
}

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

Edited August 9, 2023 by tuanphan

tuanphan · August 8, 2023

#Style 8

.

First you need to set Grid – Simple (or Grid – Overlay) to 4 columns

Next use this CSS code (this code for 60 items, If you only have a few items, you can remove the unnecessary code.

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

#Style 9.

Change to 4 columns, then use this CSS

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

#Style 10.

Change to 3 columns, then use this CSS

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

#Style 11.

Change to 3 columns then use this CSS

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

#Style 12.

Change to 3 columns then use this CSS code

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

#Style 13

Change to 9 columns then use this CSS

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

#Style 14

Change to 3 columns then use this CSS code

div#gridThumbs {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: repeat(10,minmax(0,0.3fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"1 / 3" !important;     
}  
a.grid-item:nth-child(4) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"3 / 5" !important;     
} 
a.grid-item:nth-child(5) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"3 / 5" !important;     
} 
a.grid-item:nth-child(8) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"5 / 7" !important;     
}  
a.grid-item:nth-child(11) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"7 / 9" !important;     
} 
a.grid-item:nth-child(12)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"7 / 9" !important;     
}
    a.grid-item:nth-child(15) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"9 / 11" !important;     
}  
a.grid-item:nth-child(18) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"11 / 13" !important;     
} 
a.grid-item:nth-child(19) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"11 / 13" !important;     
} 
a.grid-item:nth-child(22) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"13 / 15" !important;     
}  
a.grid-item:nth-child(25) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"15 / 17" !important;     
} 
a.grid-item:nth-child(26)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"15 / 17" !important;     
}
a.grid-item:nth-child(29) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"17 / 19" !important;     
}  
a.grid-item:nth-child(32) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"19 / 21" !important;     
} 
a.grid-item:nth-child(33) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"19 / 21" !important;     
} 
a.grid-item:nth-child(36) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"21 / 23" !important;     
}  
a.grid-item:nth-child(39) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"23 / 25" !important;     
} 
a.grid-item:nth-child(40)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"23 / 25" !important;     
}
    a.grid-item:nth-child(43) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"25 / 27" !important;     
}  
a.grid-item:nth-child(46) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"27 / 29" !important;     
} 
a.grid-item:nth-child(47) {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"27 / 29" !important;     
} 
a.grid-item:nth-child(50) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"29 / 31" !important;     
}  
a.grid-item:nth-child(53) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"31 / 33" !important;     
} 
a.grid-item:nth-child(54)  {
    grid-column: ~"2 / 3" !important;     
     grid-row: ~"31 / 33" !important;     
}
a.grid-item:nth-child(57) {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"33 / 35" !important;     
}  
a.grid-item:nth-child(60) {
    grid-column: ~"1 / 2" !important;     
     grid-row: ~"35 / 37" !important;     
}

tuanphan · August 9, 2023

#Style 15

First, you need to setup Grid to 3 columns

Next use CSS code

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

#Style 16.

First, you need to setup Grid to 4 columns, then use CSS code

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

#Style 17.

First, you need to setup Grid to 2 columns, then use CSS code

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

#Style 18.

First you need to setup Grid to 3 columns, then use CSS code

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

tuanphan · August 19, 2023

Style 19.

First set Portfolio to 6 columns, then use this code to Custom CSS box

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

Style 20.

First, set portfolio to 4 columns, then use this CSS code

div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(35,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"1 / 3" !important;
} 
a.grid-item:nth-child(6)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"3 / 5" !important;
} 
a.grid-item:nth-child(7)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"3 / 5" !important;
} 
a.grid-item:nth-child(8)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"5 / 7" !important;
} 
a.grid-item:nth-child(13)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"7 / 9" !important;
} 
a.grid-item:nth-child(14)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"7 / 9" !important;
}
a.grid-item:nth-child(15)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"9 / 11" !important;
} 
a.grid-item:nth-child(20)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"11 / 13" !important;
} 
a.grid-item:nth-child(21)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"11 / 13" !important;
} 
a.grid-item:nth-child(22)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"13 / 15" !important;
} 
a.grid-item:nth-child(27)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"15 / 17" !important;
} 
a.grid-item:nth-child(28)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"15 / 17" !important;
}
a.grid-item:nth-child(29)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"17 / 19" !important;
} 
a.grid-item:nth-child(34)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"19 / 21" !important;
} 
a.grid-item:nth-child(35)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"19 / 21" !important;
} 
a.grid-item:nth-child(36)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"21 / 23" !important;
} 
a.grid-item:nth-child(41)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"23 / 25" !important;
} 
a.grid-item:nth-child(42)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"23 / 25" !important;
}
a.grid-item:nth-child(43)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"25 / 27" !important;
} 
a.grid-item:nth-child(48)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"27 / 29" !important;
} 
a.grid-item:nth-child(49)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"27 / 29" !important;
} 
a.grid-item:nth-child(50)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"29 / 31" !important;
} 
a.grid-item:nth-child(55)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"31 / 33" !important;
} 
a.grid-item:nth-child(56)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"31 / 33" !important;
}
a.grid-item:nth-child(57)  {
    grid-column: ~"1 / 3" !important;  
    grid-row: ~"33 / 35" !important;
}

Style 21

Set portfolio to 5 columns then use CSS code

div#gridThumbs {
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.3fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"1 / 3" !important;
} 
a.grid-item:nth-child(2)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"1 / 2" !important;
} 
a.grid-item:nth-child(3)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"2 / 3" !important;
} 
a.grid-item:nth-child(4)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"3 / 4" !important;
} 
a.grid-item:nth-child(10)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"5 / 7" !important;
} 
a.grid-item:nth-child(11)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"5 / 6" !important;
} 
a.grid-item:nth-child(12)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"6 / 7" !important;
} 
a.grid-item:nth-child(13)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"7 / 8" !important;
} 
a.grid-item:nth-child(19)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"9 / 11" !important;
} 
a.grid-item:nth-child(20)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"9 / 10" !important;
} 
a.grid-item:nth-child(21)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"10 / 11" !important;
} 
a.grid-item:nth-child(22)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"11 / 12" !important;
}
a.grid-item:nth-child(28)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"13 / 15" !important;
} 
a.grid-item:nth-child(29)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"13 / 14" !important;
} 
a.grid-item:nth-child(30)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"14 / 15" !important;
} 
a.grid-item:nth-child(31)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"15 / 16" !important;
} 
a.grid-item:nth-child(37)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"17 / 19" !important;
} 
a.grid-item:nth-child(38)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"17 / 18" !important;
} 
a.grid-item:nth-child(39)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"18 / 19" !important;
} 
a.grid-item:nth-child(40)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"19 / 20" !important;
} 
a.grid-item:nth-child(46)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"21 / 23" !important;
} 
a.grid-item:nth-child(47)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"21 / 22" !important;
} 
a.grid-item:nth-child(48)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"22 / 23" !important;
} 
a.grid-item:nth-child(49)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"23 / 24" !important;
}
a.grid-item:nth-child(55)  {
    grid-column: ~"1 / 4" !important;  
    grid-row: ~"25 / 27" !important;
} 
a.grid-item:nth-child(56)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"25 / 26" !important;
} 
a.grid-item:nth-child(57)  {
    grid-column: ~"4 / 6" !important;  
    grid-row: ~"26 / 27" !important;
} 
a.grid-item:nth-child(58)  {
    grid-column: ~"1 / 6" !important;  
    grid-row: ~"27 / 28" !important;
}

Style 22

Set Portfolio to 2 columns then use CSS code

div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(60,minmax(0,0.2fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"1 / 2" !important;  
} 
a.grid-item:nth-child(2)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"2 / 5" !important;  
} 
a.grid-item:nth-child(3)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"2 / 4" !important;  
} 
a.grid-item:nth-child(4)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"4 / 7" !important;  
} 
a.grid-item:nth-child(5)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"5 / 8" !important;  
} 
a.grid-item:nth-child(6)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"7 / 9" !important;  
}
a.grid-item:nth-child(8)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"9 / 10" !important;  
} 
a.grid-item:nth-child(9)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"10 / 13" !important;  
} 
a.grid-item:nth-child(10)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"10 / 12" !important;  
} 
a.grid-item:nth-child(11)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"12 / 15" !important;  
} 
a.grid-item:nth-child(12)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"13 / 16" !important;  
} 
a.grid-item:nth-child(13)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"15 / 17" !important;  
}
a.grid-item:nth-child(15)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"17 / 18" !important;  
} 
a.grid-item:nth-child(16)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"18 / 21" !important;  
} 
a.grid-item:nth-child(17)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"18 / 20" !important;  
} 
a.grid-item:nth-child(18)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"20 / 23" !important;  
} 
a.grid-item:nth-child(19)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"21 / 24" !important;  
} 
a.grid-item:nth-child(20)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"23 / 25" !important;  
}
a.grid-item:nth-child(22)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"25 / 26" !important;  
} 
a.grid-item:nth-child(23)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"26 / 29" !important;  
} 
a.grid-item:nth-child(24)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"26 / 28" !important;  
} 
a.grid-item:nth-child(25)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"28 / 31" !important;  
} 
a.grid-item:nth-child(26)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"29 / 32" !important;  
} 
a.grid-item:nth-child(27)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"31 / 33" !important;  
}
a.grid-item:nth-child(29)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"33 / 34" !important;  
} 
a.grid-item:nth-child(30)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"34 / 37" !important;  
} 
a.grid-item:nth-child(31)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"34 / 36" !important;  
} 
a.grid-item:nth-child(32)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"36 / 39" !important;  
} 
a.grid-item:nth-child(33)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"37 / 40" !important;  
} 
a.grid-item:nth-child(34)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"39 / 41" !important;  
}
a.grid-item:nth-child(36)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"41 / 42" !important;  
} 
a.grid-item:nth-child(37)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"42 / 45" !important;  
} 
a.grid-item:nth-child(38)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"42 / 44" !important;  
} 
a.grid-item:nth-child(39)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"44 / 47" !important;  
} 
a.grid-item:nth-child(40)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"45 / 48" !important;  
} 
a.grid-item:nth-child(41)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"47 / 49" !important;  
}
a.grid-item:nth-child(43)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"49 / 50" !important;  
} 
a.grid-item:nth-child(44)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"50 / 53" !important;  
} 
a.grid-item:nth-child(45)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"50 / 52" !important;  
} 
a.grid-item:nth-child(46)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"52 / 55" !important;  
} 
a.grid-item:nth-child(47)  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"53 / 56" !important;  
} 
a.grid-item:nth-child(48)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"55 / 57" !important;  
}
a.grid-item:nth-child(50)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"57 / 58" !important;  
} 
a.grid-item:nth-child(51)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"58 / 61" !important;  
} 
a.grid-item:nth-child(52)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"58 / 60" !important;  
} 
a.grid-item:nth-child(53)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"60 / 63" !important;  
} 
a.grid-item:nth-child(54)"  { 
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"61 / 64" !important;  
} 
a.grid-item:nth-child(55)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"63 / 65" !important;  
}
a.grid-item:nth-child(57)  {
    grid-column: ~"1 / 3"  !important;    
      grid-row: ~"65 / 66" !important;  
} 
a.grid-item:nth-child(58)  {  
      grid-column: ~"1 / 2"  !important;
      grid-row: ~"66 / 69" !important;  
} 
a.grid-item:nth-child(59)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"66 / 68" !important;  
} 
a.grid-item:nth-child(60)  { 
      grid-column: ~"2 / 3"  !important;
      grid-row: ~"68 / 71" !important;  
}

tuanphan · August 20, 2023

Style 23

First change layout to 6 columns then use CSS code

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

Style 24

First, change layout to 4 columns then use CSS code

/*custom portfolio 1*/
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(25,minmax(0,0.4fr))" !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0" !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"1 / 4" !important
} 
a.grid-item:nth-child(2)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"1 / 2" !important
} 
a.grid-item:nth-child(8)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"2 / 4" !important
} 
a.grid-item:nth-child(9)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"4 / 7" !important
} 
a.grid-item:nth-child(10)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"4 / 5" !important
} 
a.grid-item:nth-child(16)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"5 / 7" !important
} 
a.grid-item:nth-child(17)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"7 / 10" !important
} 
a.grid-item:nth-child(18)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"7 / 8" !important
} 
a.grid-item:nth-child(24)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"8 / 10" !important
} 
a.grid-item:nth-child(25)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"10 / 13" !important
} 
a.grid-item:nth-child(26)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"10 / 11" !important
} 
a.grid-item:nth-child(32)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"11 / 13" !important
} 
a.grid-item:nth-child(33)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"13 / 16" !important
} 
a.grid-item:nth-child(34)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"13 / 14" !important
} 
a.grid-item:nth-child(40)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"14 / 16" !important
} 
a.grid-item:nth-child(41)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"16 / 19" !important
} 
a.grid-item:nth-child(42)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"16 / 17" !important
} 
a.grid-item:nth-child(48)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"17 / 19" !important
} 
a.grid-item:nth-child(49)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"19 / 22" !important
} 
a.grid-item:nth-child(50)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"19 / 20" !important
} 
a.grid-item:nth-child(56)  {
    grid-column: ~"4 / 5" !important;  
    grid-row: ~"20 / 22" !important
} 
a.grid-item:nth-child(57)  {
    grid-column: ~"1 / 2" !important;  
    grid-row: ~"22 / 25" !important
} 
a.grid-item:nth-child(58)  {
    grid-column: ~"2 / 4" !important;  
    grid-row: ~"22 / 23" !important
}

Style 26

First, change layout to 5 columns then use CSS code

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

tuanphan · August 21, 2023

Style 27.

First change to 4 columns then use CSS code

div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(10,minmax(0,1fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(3)  {
    grid-column: ~"2 / 4" !important;     
     grid-row: ~"1 / 3" !important;     
} 
a.grid-item:nth-child(8)  {
    grid-column: ~"2 / 4" !important;     
     grid-row: ~"3 / 5" !important;     
} 
a.grid-item:nth-child(13)  {
     grid-column: ~"2 / 4" !important;      
     grid-row: ~"5 / 7" !important;     
} 
a.grid-item:nth-child(18)  {
    grid-column: ~"2 / 4" !important;      
     grid-row: ~"7 / 9" !important;     
} 
a.grid-item:nth-child(23)  {
    grid-column: ~"2 / 4" !important;     
     grid-row: ~"9 / 11" !important;     
} 
a.grid-item:nth-child(28)  {
    grid-column: ~"2 / 4" !important;     
     grid-row: ~"11 / 13" !important;     
} 
a.grid-item:nth-child(33)  {
     grid-column: ~"2 / 4" !important;      
     grid-row: ~"13 / 15" !important;     
} 
a.grid-item:nth-child(38)  {
    grid-column: ~"2 / 4" !important;      
     grid-row: ~"15 / 17" !important;     
} 
a.grid-item:nth-child(43)  {
    grid-column: ~"2 / 4" !important;      
     grid-row: ~"17 / 19" !important;     
} 
a.grid-item:nth-child(48)  {
    grid-column: ~"2 / 4" !important;     
     grid-row: ~"19 / 21" !important;     
} 
a.grid-item:nth-child(53)  {
    grid-column: ~"2 / 4" !important;     
     grid-row: ~"21 / 23" !important;     
} 
a.grid-item:nth-child(58)  {
     grid-column: ~"2 / 4" !important;      
     grid-row: ~"23 / 25" !important;     
}

Style 28

Change to 4 columns then use CSS code

div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(10,minmax(0,1fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"1 / 3" !important;     
} 
a.grid-item:nth-child(6)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"3 / 5" !important;     
} 
a.grid-item:nth-child(11)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"5 / 7" !important;     
} 
a.grid-item:nth-child(16)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"7 / 9" !important;     
} 
a.grid-item:nth-child(21)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"9 / 11" !important;     
} 
a.grid-item:nth-child(26)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"11 / 13" !important;     
} 
a.grid-item:nth-child(31)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"13 / 15" !important;     
} 
a.grid-item:nth-child(36)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"15 / 17" !important;     
} 
a.grid-item:nth-child(41)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"17 / 19" !important;     
} 
a.grid-item:nth-child(46)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"19 / 21" !important;     
} 
a.grid-item:nth-child(51)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"21 / 23" !important;     
} 
a.grid-item:nth-child(56)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"23 / 25" !important;     
}

Style 29

Change to 4 columns then use CSS code

div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
a.grid-item:nth-child(1)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"1 / 3" !important;     
} 
a.grid-item:nth-child(2)  {
    grid-column: ~"3 / 5" !important;     
     grid-row: ~"1 / 2" !important;     
} 
a.grid-item:nth-child(5)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"3 / 5" !important;     
} 
a.grid-item:nth-child(6)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"3 / 4" !important;        
} 
a.grid-item:nth-child(9)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"5 / 7" !important;        
} 
a.grid-item:nth-child(10)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"5 / 6" !important;        
} 
a.grid-item:nth-child(13)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"7 / 9" !important;     
} 
a.grid-item:nth-child(14)  {
    grid-column: ~"3 / 5" !important;     
     grid-row: ~"7 / 8" !important;     
} 
a.grid-item:nth-child(17)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"9 / 11" !important;     
} 
a.grid-item:nth-child(18)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"9 / 10" !important;        
} 
a.grid-item:nth-child(21)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"11 / 13" !important;        
} 
a.grid-item:nth-child(22)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"11 / 12" !important;        
} 
a.grid-item:nth-child(25)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"13 / 15" !important;     
} 
a.grid-item:nth-child(26)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"13 / 14" !important;        
} 
a.grid-item:nth-child(29)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"15 / 17" !important;        
} 
a.grid-item:nth-child(30)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"15 / 16" !important;        
} 
a.grid-item:nth-child(33)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"17 / 19" !important;        
} 
a.grid-item:nth-child(34)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"17 / 18" !important;        
} 
a.grid-item:nth-child(37)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"19 / 21" !important;     
} 
a.grid-item:nth-child(38)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"19 / 20" !important;        
} 
a.grid-item:nth-child(41)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"21 / 23" !important;        
} 
a.grid-item:nth-child(42)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"21 / 22" !important;        
} 
a.grid-item:nth-child(45)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"23 / 25" !important;        
} 
a.grid-item:nth-child(46)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"23 / 24" !important;        
} 
a.grid-item:nth-child(49)  {
    grid-column: ~"1 / 3" !important;     
     grid-row: ~"25 / 27" !important;     
} 
a.grid-item:nth-child(50)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"25 / 26" !important;        
} 
a.grid-item:nth-child(53)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"27 / 29" !important;        
} 
a.grid-item:nth-child(54)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"27 / 28" !important;        
} 
a.grid-item:nth-child(57)  {
    grid-column: ~"1 / 3 " !important;     
    grid-row: ~"29 / 31" !important;        
} 
a.grid-item:nth-child(58)  {
    grid-column: ~"3 / 5" !important;     
    grid-row: ~"29 / 30" !important;        
}

MAC1 · August 21, 2023

that's awesome thank you!

Journal · December 13, 2023

Hi, please can you let me know if it's possible to create a layout like the attached? Thanks!

tuanphan · December 14, 2023

12 hours ago, Journal said:

Hi, please can you let me know if it's possible to create a layout like the attached? Thanks!

First, set Portfolio to 2 Columns, then Use this code to Website Tools (under Not Linked) > Custom CSS

.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important;
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
.portfolio-grid-overlay .grid-item:nth-child(1) {
    grid-row-start: 1 !important;
    grid-row-end: 3 !important;
}
.portfolio-grid-overlay .grid-item:nth-child(6) {
    grid-row-start: 3 !important;
    grid-row-end: 5 !important;
    grid-column-start: 2 !important;
    grid-column-end: 3 !important; 
}
.portfolio-grid-overlay .grid-item:nth-child(7) {
    grid-row-start: 5 !important;
    grid-row-end: 7 !important;
}
.portfolio-grid-overlay .grid-item:nth-child(12) {
    grid-row-start: 7 !important;
    grid-row-end: 9 !important;
    grid-column-start: 2 !important;
    grid-column-end: 3 !important; 
}
.portfolio-grid-overlay .grid-item:nth-child(13) {
    grid-row-start: 9 !important;
    grid-row-end: 11 !important;
}
.portfolio-grid-overlay .grid-item:nth-child(18) {
    grid-row-start: 11 !important;
    grid-row-end: 13 !important;
    grid-column-start: 2 !important;
    grid-column-end: 3 !important; 
}
.portfolio-grid-overlay .grid-item:nth-child(19) {
    grid-row-start: 13 !important;
    grid-row-end: 15 !important;
}
.portfolio-grid-overlay .grid-item:nth-child(24) {
    grid-row-start: 15 !important;
    grid-row-end: 17 !important;
    grid-column-start: 2 !important;
    grid-column-end: 3 !important; 
}
.portfolio-grid-overlay .grid-item:nth-child(25) {
    grid-row-start: 17 !important;
    grid-row-end: 19 !important;
}
.portfolio-grid-overlay .grid-item:nth-child(30) {
    grid-row-start: 19 !important;
    grid-row-end: 21 !important;
    grid-column-start: 2 !important;
    grid-column-end: 3 !important; 
}

connieresch · December 17, 2023

How can I calculate myself how to do this with a custom layout?

I have 12 portfolio items, and I would like to lay them out in a specific way within 13 columns and 20 rows, I've got all the row and column points mapped out for each item. I want to know how to create and adjust this for when I add new items or make a new layout later. I tried a few variations of these with my own numbers but they didn't work quite right, the reason being I don't know what calculation goes into it!

for example the repeat fractional units for these, even if they are just set to (0, auto) it gives me issues. I would put in repeat 13 and repeat 20 for the columns and rows. Also, the calculation of the 3n+1 number below, I don't understand:

a.grid-item:nth-child(3n+1) {
    grid-column: ~"1 / 3" !important;
}

grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.5fr)) !important;
}

What makes them be either

a.grid-item:nth-child

or:

.portfolio-grid-overlay .grid-item:nth-child(30)

? Is the .portfolio-grid-overlay not necessary in front? And why are some of the numbers next to the child items not corresponding to the portfolio item number? Is this the position they are in the rows instead?

I'd like to paste my code in the header code injection of the specific portfolio page, but unsure how to set up my code. I had it nearly right, but they weren't stretching to the height of the row and one of my portfolio items disappeared.

Thanks for any help

tuanphan · December 19, 2023

On 12/18/2023 at 4:44 AM, connieresch said:
How can I calculate myself how to do this with a custom layout?

I have 12 portfolio items, and I would like to lay them out in a specific way within 13 columns and 20 rows, I've got all the row and column points mapped out for each item. I want to know how to create and adjust this for when I add new items or make a new layout later. I tried a few variations of these with my own numbers but they didn't work quite right, the reason being I don't know what calculation goes into it!

for example the repeat fractional units for these, even if they are just set to (0, auto) it gives me issues. I would put in repeat 13 and repeat 20 for the columns and rows. Also, the calculation of the 3n+1 number below, I don't understand:
a.grid-item:nth-child(3n+1) {
    grid-column: ~"1 / 3" !important;
}
grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(30,minmax(0,0.5fr)) !important;
}
What makes them be either
a.grid-item:nth-child
or:
.portfolio-grid-overlay .grid-item:nth-child(30)
? Is the .portfolio-grid-overlay not necessary in front? And why are some of the numbers next to the child items not corresponding to the portfolio item number? Is this the position they are in the rows instead?

I'd like to paste my code in the header code injection of the specific portfolio page, but unsure how to set up my code. I had it nearly right, but they weren't stretching to the height of the row and one of my portfolio items disappeared.

Thanks for any help

Which layout are you referring to? Each will have different

BLK · June 10

Hi,

I am using the below:

#2. 2 small - 1 large - 2 small - 1 large

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

But the 1 large image is showing really big but i would want it aspect ratio 4:3. Or atleast the height reduced..

Is this possible please?

Thank you so much in advance!!

tuanphan · June 13

On 6/10/2024 at 7:01 PM, BLK said:
Hi,

I am using the below:

#2. 2 small - 1 large - 2 small - 1 large
a.grid-item:nth-child(3n+3) {
    grid-column: ~"1 / 3" !important;
}
div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
But the 1 large image is showing really big but i would want it aspect ratio 4:3. Or atleast the height reduced..

Is this possible please?

Thank you so much in advance!!

You can use this code

a.grid-item:nth-child(3n+3) {
    grid-column: ~"1 / 3" !important;
}
div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
a.grid-item:nth-child(3n+3) .grid-image {
    padding-bottom: 30% !important;
}

BLK · June 17

Thank you!!

[Share] Custom Layout - Portfolio Page

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

BLK

Posted Images

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources