Change number of child pages displayed on grid template

Hi there,

As long as you have at least four child pages assigned to the grid page template, you can use this CSS in the Appearance > Customize > Additional CSS area:

@media (min-width: 1160px) {
    .pique-grid-three article:nth-of-type(3n+1),
    .pique-grid-three article:nth-of-type(3n) {
        margin: 0;
    }
    .pique-grid-three article:nth-of-type(4n),
    .pique-grid-three article:nth-of-type(3n+1) {
        clear: none;
    }
    .pique-grid-three article {
        width: 20%;
    }
    .pique-grid-three article,
    .pique-grid-three article:nth-of-type(3n),
    .pique-grid-three article:nth-of-type(3n+1) {
        margin: 0 27px;
    }
    .pique-grid-three article:nth-of-type(4n+1){
    clear: both;
    }
}

This will only apply to screens where the browser is at least 1160px wide. It will only show three columns when the browser is smaller than that.

That worked! Thank you so much!