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,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;
}
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,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>
Need a help?
Just send me an email with your site url. I will answer within 24 hours