In this post
How to
#1. First you need to set Grid – Simple (or Grid – Overlay) to 3 columns
#2. Next, use this code to Custom CSS box
/* 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"; }
Extra
Apply code for specific portfolio page
With Business Plan/Higher, use this code to Page Header
<style> 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; } </style>
With Personal/Basic Plan, use this code to Custom CSS
#enter-page-id { /* 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"; } }
Apply code for Desktop Only
For All pages, use this code to Custom CSS
@media screen and (min-width:768px) { /* 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"; } }
For specific portfolio page, use this code to Page Header
<style> @media screen and (min-width:768px) { 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; }} </style>
For specific portfolio page (Personal Plan), use this code to Custom CSS
@media screen and (min-width:768px) { #enter-page-id { /* 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"; } } }
Need a help?
Just send me an email with your site url. I will answer within 24 hours