Siobhan Bamber (siobhyb) on "[Theme: Sketch] increase no. of columns"

Hi there,

There isn't a built in way to increase the number of columns that portfolio items are displayed in with Sketch, but you could create five columns with some custom CSS.

To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

@media screen and (min-width: 50em) {
.project-navigation-wrapper .jetpack-portfolio:nth-of-type(3n+1), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(3n+1), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(3n+1) { clear: none;
}
.project-navigation-wrapper .jetpack-portfolio:nth-of-type(3n), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(3n), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(3n) { clear: none; margin-right: 2%;
}
.project-navigation-wrapper .jetpack-portfolio:nth-of-type(5n+1), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(5n+1), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(5n+1) { clear: left;
}
.project-navigation-wrapper .jetpack-portfolio:nth-of-type(5n), .page-template-portfolio-page-php .jetpack-portfolio:nth-of-type(5n), body[class*="jetpack-portfolio"].archive .jetpack-portfolio:nth-of-type(5n) { clear: right; margin-right: 0;
}
.project-navigation-wrapper .jetpack-portfolio, .page-template-portfolio-page-php .jetpack-portfolio, body[class*="jetpack-portfolio"].archive .jetpack-portfolio { width: 18%;
}
}

Let me know how you get on with that or if you have any other questions.