Buy me a coffee

Gallery Section: Grid #5

gallery-section-grid5-min

How to

#1. First you need to set Gallery Section: Grid 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 */
figure.gallery-grid-item:nth-child(1) {
    grid-column: ~"1 / 3" !important;
    grid-row: ~"1 / 3" !important;
}
/* Item 6 - Large */
figure.gallery-grid-item:nth-child(6) {
    grid-column: ~"2 / 4";
    grid-row: ~"3 / 5";
}
/* Item 7 - Large */
figure.gallery-grid-item:nth-child(7) {
    grid-column: ~"1 / 3";
    grid-row: ~"5 / 7";
}
/* Item 12 - Large */
figure.gallery-grid-item:nth-child(12) {
    grid-column: ~"2 / 4";
    grid-row: ~"7 / 9";
}
/* Item 13 - Large */
figure.gallery-grid-item:nth-child(13) {
    grid-column: ~"1 / 3";
    grid-row: ~"9 / 11";
}
/* Item 18 - Large */
figure.gallery-grid-item:nth-child(18) {
    grid-column: ~"2 / 4";
    grid-row: ~"11 / 13";
}
/* Item 19 - Large */
figure.gallery-grid-item:nth-child(19) {
    grid-column: ~"1 / 3";
    grid-row: ~"13 / 15";
}
/* Item 24 - Large */
figure.gallery-grid-item:nth-child(24) {
    grid-column: ~"2 / 4";
    grid-row: ~"15 / 17";
}
/* Item 25 - Large */
figure.gallery-grid-item:nth-child(25) {
    grid-column: ~"1 / 3";
    grid-row: ~"17 / 19";
}
/* Item 30 - Large */
figure.gallery-grid-item:nth-child(30) {
    grid-column: ~"2 / 4";
    grid-row: ~"19 / 21";
}
/* Item 31 - Large */
figure.gallery-grid-item:nth-child(31) {
    grid-column: ~"1 / 3";
    grid-row: ~"21 / 23";
}
/* Item 36 - Large */
figure.gallery-grid-item:nth-child(36) {
    grid-column: ~"2 / 4";
    grid-row: ~"23 / 25";
}
/* Item 37 - Large */
figure.gallery-grid-item:nth-child(37) {
    grid-column: ~"1 / 3";
    grid-row: 25 / 27;
}
/* Item 42 - Large */
figure.gallery-grid-item:nth-child(42) {
    grid-column: ~"2 / 4";
    grid-row: ~"27 / 29";
}
/* Item 43 - Large */
figure.gallery-grid-item:nth-child(43) {
    grid-column: ~"1 / 3";
    grid-row: ~"29 / 31";
}
/* Item 48 - Large */
figure.gallery-grid-item:nth-child(48) {
    grid-column: ~"2 / 4";
    grid-row: ~"31 / 33";
}
/* Item 49 - Large */
figure.gallery-grid-item:nth-child(49) {
    grid-column: ~"1 / 3";
    grid-row: ~"33 / 35";
}
/* Item 54 - Large */
figure.gallery-grid-item:nth-child(54) {
    grid-column: ~"2 / 4";
    grid-row: ~"35 / 37";
}
/* Item 55 - Large */
figure.gallery-grid-item:nth-child(55) {
    grid-column: ~"1 / 3";
    grid-row: ~"37 / 39";
}
/* Item 60 - Large */
figure.gallery-grid-item:nth-child(60) {
    grid-column: ~"2 / 4";
    grid-row: ~"39 / 41";
}

 

Extra

Apply code for specific page

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

<style>
/* Gallery Section: Grid 5 */
.gallery-grid-wrapper {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
   
}
/* item 1 - Large */
figure.gallery-grid-item:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row: 1 / 3 !important;
}
/* Item 6 - Large */
figure.gallery-grid-item:nth-child(6) {
    grid-column: 2 / 4;
    grid-row: 3 / 5;
}
/* Item 7 - Large */
figure.gallery-grid-item:nth-child(7) {
    grid-column: 1 / 3;
    grid-row: 5 / 7;
}
/* Item 12 - Large */
 figure.gallery-grid-item:nth-child(12) {
    grid-column: 2 / 4;
    grid-row: 7 / 9;
}
/* Item 13 - Large */
 figure.gallery-grid-item:nth-child(13) {
    grid-column: 1 / 3;
    grid-row: 9 / 11;
}
/* Item 18 - Large */
 figure.gallery-grid-item:nth-child(18) {
    grid-column: 2 / 4;
    grid-row: 11 / 13;
}
/* Item 19 - Large */
 figure.gallery-grid-item:nth-child(19) {
    grid-column: 1 / 3;
    grid-row: 13 / 15;
}
/* Item 24 - Large */
 figure.gallery-grid-item:nth-child(24) {
    grid-column: 2 / 4;
    grid-row: 15 / 17;
}
/* Item 25 - Large */
 figure.gallery-grid-item:nth-child(25) {
    grid-column: 1 / 3;
    grid-row: 17 / 19;
}
/* Item 30 - Large */
 figure.gallery-grid-item:nth-child(30) {
    grid-column: 2 / 4;
    grid-row: 19 / 21;
}
/* Item 31 - Large */
 figure.gallery-grid-item:nth-child(31) {
    grid-column: 1 / 3;
    grid-row: 21 / 23;
}
/* Item 36 - Large */
 figure.gallery-grid-item:nth-child(36) {
    grid-column: 2 / 4;
    grid-row: 23 / 25;
}
/* Item 37 - Large */
 figure.gallery-grid-item:nth-child(37) {
    grid-column: 1 / 3;
    grid-row: 25 / 27;
}
/* Item 42 - Large */
 figure.gallery-grid-item:nth-child(42) {
    grid-column: 2 / 4;
    grid-row: 27 / 29;
}
/* Item 43 - Large */
 figure.gallery-grid-item:nth-child(43) {
    grid-column: 1 / 3;
    grid-row: 29 / 31;
}
/* Item 48 - Large */
 figure.gallery-grid-item:nth-child(48) {
    grid-column: 2 / 4;
    grid-row: 31 / 33;
}
/* Item 49 - Large */
 figure.gallery-grid-item:nth-child(49) {
    grid-column: 1 / 3;
    grid-row: 33 / 35;
}
/* Item 54 - Large */
 figure.gallery-grid-item:nth-child(54) {
    grid-column: 2 / 4;
    grid-row: 35 / 37;
}
/* Item 55 - Large */
 figure.gallery-grid-item:nth-child(55) {
    grid-column: 1 / 3;
    grid-row: 37 / 39;
}
/* Item 60 - Large */
 figure.gallery-grid-item:nth-child(60) {
    grid-column: 2 / 4;
    grid-row: 39 / 41;
}
</style>

Need a help?

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

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder