You can send your questions to my email to get faster answer in 24 hours (free).

Buy me a coffee

Portfolio Page Style 27

Aug 16, 2023

How to

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

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

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

Extra

Apply code for specific portfolio page

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

<style>
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>

Need a help?

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

Ask me a question, free