In this post
How to
#1. First you need to set Gallery Section: Grid to 6 columns. If you can’t set 9, just set 6 columns
#2. Next, use this code to Custom CSS box
div.gallery-grid-wrapper {
grid-template-columns: repeat(14,minmax(0,1fr)) !important;
grid-template-rows: repeat(29,minmax(0,0.2fr)) !important;
}
.gallery-grid-item-wrapper {
padding-bottom: 0 !important;
height: 100%;
}
.gallery-grid-item img {
position: static !important;
}
figure.gallery-grid-item:nth-child(1) {
grid-column: ~"1 / 15" !important;
grid-row: ~"1 / 4" !important
}
figure.gallery-grid-item:nth-child(2) {
grid-column: ~"1 / 3" !important;
}
figure.gallery-grid-item:nth-child(3) {
grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(4) {
grid-column: ~"5 / 7" !important;
}
figure.gallery-grid-item:nth-child(5) {
grid-column: ~"7 / 9" !important;
}
figure.gallery-grid-item:nth-child(6) {
grid-column: ~"9 / 11" !important;
}
figure.gallery-grid-item:nth-child(7) {
grid-column: ~"11 / 13" !important;
}
figure.gallery-grid-item:nth-child(8) {
grid-column: ~"13 / 15" !important;
}
figure.gallery-grid-item:nth-child(9) {
grid-column: ~"1 / 4" !important;
grid-row: ~"5 / 6" !important;
}
figure.gallery-grid-item:nth-child(10) {
grid-column: ~"4 / 8" !important;
grid-row: ~"5 / 7" !important;
}
figure.gallery-grid-item:nth-child(11) {
grid-column: ~"8 / 12" !important;
grid-row: ~"5 / 7" !important;
}
figure.gallery-grid-item:nth-child(12) {
grid-column: ~"12 / 15" !important;
grid-row: ~"5 / 6" !important;
}
figure.gallery-grid-item:nth-child(13) {
grid-column: ~"1 / 4" !important;
grid-row: ~"6 / 7" !important;
}
figure.gallery-grid-item:nth-child(14) {
grid-column: ~"12 / 15" !important;
grid-row: ~"6 / 7" !important;
}
figure.gallery-grid-item:nth-child(15) {
grid-column: ~"1 / 15" !important;
grid-row: ~"7 / 10" !important
}
figure.gallery-grid-item:nth-child(16) {
grid-column: ~"1 / 3" !important;
}
figure.gallery-grid-item:nth-child(17) {
grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(18) {
grid-column: ~"5 / 7" !important;
}
figure.gallery-grid-item:nth-child(19) {
grid-column: ~"7 / 9" !important;
}
figure.gallery-grid-item:nth-child(20) {
grid-column: ~"9 / 11" !important;
}
figure.gallery-grid-item:nth-child(21) {
grid-column: ~"11 / 13" !important;
}
figure.gallery-grid-item:nth-child(22) {
grid-column: ~"13 / 15" !important;
}
figure.gallery-grid-item:nth-child(23) {
grid-column: ~"1 / 4" !important;
grid-row: ~"11 / 12" !important;
}
figure.gallery-grid-item:nth-child(24) {
grid-column: ~"4 / 8" !important;
grid-row: ~"11 / 13" !important;
}
figure.gallery-grid-item:nth-child(25) {
grid-column: ~"8 / 12" !important;
grid-row: ~"11 / 13" !important;
}
figure.gallery-grid-item:nth-child(26) {
grid-column: ~"12 / 15" !important;
grid-row: ~"11 / 12" !important;
}
figure.gallery-grid-item:nth-child(27) {
grid-column: ~"1 / 4" !important;
grid-row: ~"12 / 13" !important;
}
figure.gallery-grid-item:nth-child(28) {
grid-column: ~"12 / 15" !important;
grid-row: ~"12 / 13" !important;
}
figure.gallery-grid-item:nth-child(29) {
grid-column: ~"1 / 15" !important;
grid-row: ~"13 / 16" !important
}
figure.gallery-grid-item:nth-child(30) {
grid-column: ~"1 / 3" !important;
}
figure.gallery-grid-item:nth-child(31) {
grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(32) {
grid-column: ~"5 / 7" !important;
}
figure.gallery-grid-item:nth-child(33) {
grid-column: ~"7 / 9" !important;
}
figure.gallery-grid-item:nth-child(34) {
grid-column: ~"9 / 11" !important;
}
figure.gallery-grid-item:nth-child(35) {
grid-column: ~"11 / 13" !important;
}
figure.gallery-grid-item:nth-child(36) {
grid-column: ~"13 / 15" !important;
}
figure.gallery-grid-item:nth-child(37) {
grid-column: ~"1 / 4" !important;
grid-row: ~"17 / 18" !important;
}
figure.gallery-grid-item:nth-child(38) {
grid-column: ~"4 / 8" !important;
grid-row: ~"17 / 19" !important;
}
figure.gallery-grid-item:nth-child(39) {
grid-column: ~"8 / 12" !important;
grid-row: ~"17 / 19" !important;
}
figure.gallery-grid-item:nth-child(40) {
grid-column: ~"12 / 15" !important;
grid-row: ~"17 / 18" !important;
}
figure.gallery-grid-item:nth-child(41) {
grid-column: ~"1 / 4" !important;
grid-row: ~"18 / 19" !important;
}
figure.gallery-grid-item:nth-child(42) {
grid-column: ~"12 / 15" !important;
grid-row: ~"18 / 19" !important;
}
figure.gallery-grid-item:nth-child(43) {
grid-column: ~"1 / 15" !important;
grid-row: ~"19 / 22" !important
}
figure.gallery-grid-item:nth-child(44) {
grid-column: ~"1 / 3" !important;
}
figure.gallery-grid-item:nth-child(45) {
grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(46) {
grid-column: ~"5 / 7" !important;
}
figure.gallery-grid-item:nth-child(47) {
grid-column: ~"7 / 9" !important;
}
figure.gallery-grid-item:nth-child(48) {
grid-column: ~"9 / 11" !important;
}
figure.gallery-grid-item:nth-child(49) {
grid-column: ~"11 / 13" !important;
}
figure.gallery-grid-item:nth-child(50) {
grid-column: ~"13 / 15" !important;
}
figure.gallery-grid-item:nth-child(51) {
grid-column: ~"1 / 4" !important;
grid-row: ~"23 / 24" !important;
}
figure.gallery-grid-item:nth-child(52) {
grid-column: ~"4 / 8" !important;
grid-row: ~"23 / 25" !important;
}
figure.gallery-grid-item:nth-child(53) {
grid-column: ~"8 / 12" !important;
grid-row: ~"23 / 25" !important;
}
figure.gallery-grid-item:nth-child(54) {
grid-column: ~"12 / 15" !important;
grid-row: ~"23 / 24" !important;
}
figure.gallery-grid-item:nth-child(55) {
grid-column: ~"1 / 4" !important;
grid-row: ~"24 / 25" !important;
}
figure.gallery-grid-item:nth-child(56) {
grid-column: ~"12 / 15" !important;
grid-row: ~"24 / 25" !important;
}
figure.gallery-grid-item:nth-child(57) {
grid-column: ~"1 / 15" !important;
grid-row: ~"25 / 28" !important
}
figure.gallery-grid-item:nth-child(58) {
grid-column: ~"1 / 3" !important;
}
figure.gallery-grid-item:nth-child(59) {
grid-column: ~"3 / 5" !important;
}
figure.gallery-grid-item:nth-child(60) {
grid-column: ~"5 / 7" !important;
}
Extra
Apply code for specific page
With Business Plan/Higher, use this code to Page Header
<style>
div.gallery-grid-wrapper {
grid-template-columns: repeat(14,minmax(0,1fr)) !important;
grid-template-rows: repeat(29,minmax(0,0.2fr)) !important;
}
.gallery-grid-item-wrapper {
padding-bottom: 0 !important;
height: 100%;
}
.gallery-grid-item img {
position: static !important;
}
figure.gallery-grid-item:nth-child(1) {
grid-column: 1 / 15 !important;
grid-row: 1 / 4 !important
}
figure.gallery-grid-item:nth-child(2) {
grid-column: 1 / 3 !important;
}
figure.gallery-grid-item:nth-child(3) {
grid-column: 3 / 5 !important;
}
figure.gallery-grid-item:nth-child(4) {
grid-column: 5 / 7 !important;
}
figure.gallery-grid-item:nth-child(5) {
grid-column: 7 / 9 !important;
}
figure.gallery-grid-item:nth-child(6) {
grid-column: 9 / 11 !important;
}
figure.gallery-grid-item:nth-child(7) {
grid-column: 11 / 13 !important;
}
figure.gallery-grid-item:nth-child(8) {
grid-column: 13 / 15 !important;
}
figure.gallery-grid-item:nth-child(9) {
grid-column: 1 / 4 !important;
grid-row: 5 / 6 !important;
}
figure.gallery-grid-item:nth-child(10) {
grid-column: 4 / 8 !important;
grid-row: 5 / 7 !important;
}
figure.gallery-grid-item:nth-child(11) {
grid-column: 8 / 12 !important;
grid-row: 5 / 7 !important;
}
figure.gallery-grid-item:nth-child(12) {
grid-column: 12 / 15 !important;
grid-row: 5 / 6 !important;
}
figure.gallery-grid-item:nth-child(13) {
grid-column: 1 / 4 !important;
grid-row: 6 / 7 !important;
}
figure.gallery-grid-item:nth-child(14) {
grid-column: 12 / 15 !important;
grid-row: 6 / 7 !important;
}
figure.gallery-grid-item:nth-child(15) {
grid-column: 1 / 15 !important;
grid-row: 7 / 10 !important
}
figure.gallery-grid-item:nth-child(16) {
grid-column: 1 / 3 !important;
}
figure.gallery-grid-item:nth-child(17) {
grid-column: 3 / 5 !important;
}
figure.gallery-grid-item:nth-child(18) {
grid-column: 5 / 7 !important;
}
figure.gallery-grid-item:nth-child(19) {
grid-column: 7 / 9 !important;
}
figure.gallery-grid-item:nth-child(20) {
grid-column: 9 / 11 !important;
}
figure.gallery-grid-item:nth-child(21) {
grid-column: 11 / 13 !important;
}
figure.gallery-grid-item:nth-child(22) {
grid-column: 13 / 15 !important;
}
figure.gallery-grid-item:nth-child(23) {
grid-column: 1 / 4 !important;
grid-row: 11 / 12 !important;
}
figure.gallery-grid-item:nth-child(24) {
grid-column: 4 / 8 !important;
grid-row: 11 / 13 !important;
}
figure.gallery-grid-item:nth-child(25) {
grid-column: 8 / 12 !important;
grid-row: 11 / 13 !important;
}
figure.gallery-grid-item:nth-child(26) {
grid-column: 12 / 15 !important;
grid-row: 11 / 12 !important;
}
figure.gallery-grid-item:nth-child(27) {
grid-column: 1 / 4 !important;
grid-row: 12 / 13 !important;
}
figure.gallery-grid-item:nth-child(28) {
grid-column: 12 / 15 !important;
grid-row: 12 / 13 !important;
}
figure.gallery-grid-item:nth-child(29) {
grid-column: 1 / 15 !important;
grid-row: 13 / 16 !important
}
figure.gallery-grid-item:nth-child(30) {
grid-column: 1 / 3 !important;
}
figure.gallery-grid-item:nth-child(31) {
grid-column: 3 / 5 !important;
}
figure.gallery-grid-item:nth-child(32) {
grid-column: 5 / 7 !important;
}
figure.gallery-grid-item:nth-child(33) {
grid-column: 7 / 9 !important;
}
figure.gallery-grid-item:nth-child(34) {
grid-column: 9 / 11 !important;
}
figure.gallery-grid-item:nth-child(35) {
grid-column: 11 / 13 !important;
}
figure.gallery-grid-item:nth-child(36) {
grid-column: 13 / 15 !important;
}
figure.gallery-grid-item:nth-child(37) {
grid-column: 1 / 4 !important;
grid-row: 17 / 18 !important;
}
figure.gallery-grid-item:nth-child(38) {
grid-column: 4 / 8 !important;
grid-row: 17 / 19 !important;
}
figure.gallery-grid-item:nth-child(39) {
grid-column: 8 / 12 !important;
grid-row: 17 / 19 !important;
}
figure.gallery-grid-item:nth-child(40) {
grid-column: 12 / 15 !important;
grid-row: 17 / 18 !important;
}
figure.gallery-grid-item:nth-child(41) {
grid-column: 1 / 4 !important;
grid-row: 18 / 19 !important;
}
figure.gallery-grid-item:nth-child(42) {
grid-column: 12 / 15 !important;
grid-row: 18 / 19 !important;
}
figure.gallery-grid-item:nth-child(43) {
grid-column: 1 / 15 !important;
grid-row: 19 / 22 !important
}
figure.gallery-grid-item:nth-child(44) {
grid-column: 1 / 3 !important;
}
figure.gallery-grid-item:nth-child(45) {
grid-column: 3 / 5 !important;
}
figure.gallery-grid-item:nth-child(46) {
grid-column: 5 / 7 !important;
}
figure.gallery-grid-item:nth-child(47) {
grid-column: 7 / 9 !important;
}
figure.gallery-grid-item:nth-child(48) {
grid-column: 9 / 11 !important;
}
figure.gallery-grid-item:nth-child(49) {
grid-column: 11 / 13 !important;
}
figure.gallery-grid-item:nth-child(50) {
grid-column: 13 / 15 !important;
}
figure.gallery-grid-item:nth-child(51) {
grid-column: 1 / 4 !important;
grid-row: 23 / 24 !important;
}
figure.gallery-grid-item:nth-child(52) {
grid-column: 4 / 8 !important;
grid-row: 23 / 25 !important;
}
figure.gallery-grid-item:nth-child(53) {
grid-column: 8 / 12 !important;
grid-row: 23 / 25 !important;
}
figure.gallery-grid-item:nth-child(54) {
grid-column: 12 / 15 !important;
grid-row: 23 / 24 !important;
}
figure.gallery-grid-item:nth-child(55) {
grid-column: 1 / 4 !important;
grid-row: 24 / 25 !important;
}
figure.gallery-grid-item:nth-child(56) {
grid-column: 12 / 15 !important;
grid-row: 24 / 25 !important;
}
figure.gallery-grid-item:nth-child(57) {
grid-column: 1 / 15 !important;
grid-row: 25 / 28 !important
}
figure.gallery-grid-item:nth-child(58) {
grid-column: 1 / 3 !important;
}
figure.gallery-grid-item:nth-child(59) {
grid-column: 3 / 5 !important;
}
figure.gallery-grid-item:nth-child(60) {
grid-column: 5 / 7 !important;
}
</style>
Need a help?
Just send me an email with your site url. I will answer within 24 hours