Buy me a coffee

Free answer within 24 hours. Send your questions now ->

Custom Portfolio Style 5

portfolio5-min

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

See how to find Page ID

#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

Share this post:

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