Custom Portfolio Style 6 (2)

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

/* portfolio style 6 */
a.grid-item:nth-child(5n+3) {
    grid-column: ~"3 / 5" !important;
}
a.grid-item:nth-child(5n - 1) {
    grid-column: ~"1 / 4" !important;
}
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important; 
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}

Extra

Apply code for specific portfolio page

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

<style>
a.grid-item:nth-child(5n+3) {
    grid-column: 3 / 5 !important;
}

a.grid-item:nth-child(5n - 1) {
    grid-column: 1 / 4 !important;
}
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important; 
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
</style>

With Personal/Basic Plan, use this code to Custom CSS

See how to find Page ID

#enter-page-id {
/* portfolio style 6 */
a.grid-item:nth-child(5n+3) {
    grid-column: ~"3 / 5" !important;
}
a.grid-item:nth-child(5n - 1) {
    grid-column: ~"1 / 4" !important;
}
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important; 
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
}

Apply code for Desktop Only

For All pages, use this code to Custom CSS

@media screen and (min-width:768px) {
/* portfolio style 6 */
a.grid-item:nth-child(5n+3) {
    grid-column: ~"3 / 5" !important;
}
a.grid-item:nth-child(5n - 1) {
    grid-column: ~"1 / 4" !important;
}
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important; 
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}
}

For specific portfolio page, use this code to Page Header

<style>
@media screen and (min-width:768px) {
a.grid-item:nth-child(5n+3) {
    grid-column: 3 / 5 !important;
}
a.grid-item:nth-child(5n - 1) {
    grid-column: 1 / 4 !important;
}
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important; 
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}}
</style>

For specific portfolio page (Personal Plan), use this code to Custom CSS

#enter-page-id {
@media screen and (min-width:768px) {
/* portfolio style 6 */
a.grid-item:nth-child(5n+3) {
    grid-column: ~"3 / 5" !important;
}
a.grid-item:nth-child(5n - 1) {
    grid-column: ~"1 / 4" !important;
}
div#gridThumbs {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:  repeat(10,minmax(0,0.5fr)) !important;
}
.portfolio-grid-overlay .grid-item {
    padding-bottom: 0 !important; 
    height: 100%;
}
.portfolio-grid-overlay .grid-item .grid-image {
    position: static;
}}}

Need a help?

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