Neighborhoods – Change the Number per Row

The Home Page Neighborhoods (Communities) Section has the communities to automatically fill rows based on an image size of 150px and 6 communities or neighborhoods per row.
But depending on the number of communities that you have, you may want to modify this.

There are four sections of CSS that control the number per row, depending on the screen size of the device you're looking at.

You will add the following CSS to Appearance > Customize > Additional CSS, and then edit it according to the explanations below.

/* Screens less than 480px wide - 1 Community per row */
.display-posts.community.grid {
	grid-template-columns: 1fr;
}
/* Screens wider than 480px - 2 Communities per row */
@media only screen and (min-width: 480px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 2, 150px );
	}
}
/* Screens wider than 680px - 3 Communities per row */
@media only screen and (min-width: 680px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 3, 150px );
	}
}
/* Screens wider than 1024px - 6 Communities per row */
@media only screen and (min-width: 1024px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 6, 150px);
	}
}

For very small screens, less than 480px wide, the theme uses only one community per row - the 1fr in the following. You will most likely not want to change this.

/* Screens less than 480px wide - 1 Community per row */
.display-posts.community.grid {
	grid-template-columns: 1fr;
}

For screens that are at least 480px wide, the theme uses 2 communities per row and an image size of 150px - repeat(2) and 150px.

/* Screens wider than 480px - 2 Communities per row */
@media only screen and (min-width: 480px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 2, 150px );
	}
}

For screens that are at least 680px wide, the theme uses 3 communities per row and an image size of 150px - repeat(3) and 150px.

/* Screens wider than 680px - 3 Communities per row */
@media only screen and (min-width: 680px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 3, 150px );
	}
}

For screens wider than 1024px, the theme uses 6 communities per row and an image size of 150px - repeat(6) and 150px.

/* Screens wider than 1024px - 6 Communities per row */
@media only screen and (min-width: 1024px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 6, 150px);
	}
}

So let's say that you have a total of 9 communities, and wanted to have a maximum of 3 communities per row, for screens wider than 1024px.
You would edit only the "Screens wider than 1024px - 6 Communities per row" section to use 3 instead of 6:

/* Screens wider than 1024px - 6 Communities per row */
@media only screen and (min-width: 1024px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 3, 150px);
	}
}

You may also want to edit the "Screens wider than 480px - 2 Communities per row" to have only 1 community per row, instead of 2, as you have an odd number of communities.

/* Screens wider than 480px - 2 Communities per row */
@media only screen and (min-width: 480px) {
	.display-posts.community.grid {
		grid-template-columns: repeat( 1, 150px );
	}
}

You would leave the other sections, as shown at the top of this tutorial.

My Community Pro Theme Setup