Please note: This FAQ article is specifically for the Rosemary theme.
By default, Rosemary's full-width grid layout will have your grid items display in 2 columns. If you'd like to have them instead display in 3 columns, it's a very simple process of copying and pasting some code.
Navigate to WordPress Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following:
@media only screen and (min-width: 943px){
#main.fullwidth .sp-grid > li {width: 340px; margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 0;}
}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
#main.fullwidth .sp-grid >li {width: 293px;}
}
@media only screen and (max-width: 960px) {
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 0;}
}
Be sure to save changes within your Customizer section when finished.
If the changes are not immediately taking effect, please also ensure that you clear any browser or WordPress cache tool you may have enabled.