For posts with text content, the maximum theme setting of 3 columns is plenty, but if using posts to display images, or making reference pages with just featured image and title, you may want to create more columns.

This tutorial will give you the custom CSS rules to display posts in as many columns as you like, and set a different number for each mobile device or browser size.
 

Setting columns for Desktop, Small Tablets and Phones

As and example, below are the CSS rules  to create 5 columns with a 1% space between them on Desktop, then 3 columns on Small Tablets and 2 columns on Phones.

• Do not use masonry or any column option.
• Replace xxx by the page id number
• CSS goes in the Theme Global Custom CSS Rule box

 
Note: The CSS differs depending if the posts are displayed using a page using a “page with posts” template, or if they are displayed on a page using the default template, but containing a Show Posts Shortcode.

.is-desktop.page-id-xxx .wvrx-posts article {float:left;width:19.2%;margin-right:1%;}
.is-desktop.page-id-xxx .wvrx-posts article:nth-of-type(5n) {margin-right:0;}
.is-desktop.page-id-xxx .wvrx-posts article:nth-of-type(5n+1) {clear:both;}

.is-smalltablet.page-id-xxx .wvrx-posts article {float:left;width:32.66%;margin-right:1%;clear:none;}
.is-smalltablet.page-id-xxx .wvrx-posts article:nth-of-type(3n) {margin-right:0;}
.is-smalltablet.page-id-xxx .wvrx-posts article:nth-of-type(3n+1) {clear:both;}

.is-phone.page-id-xxx .wvrx-posts article {float:left;width:49.5%;margin-right:1%;clear:none;}
.is-phone.page-id-xxx .wvrx-posts article:nth-of-type(2n) {margin-right:0;}
.is-phone.page-id-xxx .wvrx-posts article:nth-of-type(2n+1) {clear:both;}

 

.page-id-xxx .atw-show-posts article ~ div {display:none;}
.page-id-xxx .atw-show-posts article {box-sizing:border-box;}

.is-desktop.page-id-xxx .atw-show-posts article {float:left;width:19.2%;margin-right:1%;}
.is-desktop.page-id-xxx .atw-show-posts article:nth-of-type(5n) {margin-right:0;}
.is-desktop.page-id-xxx .atw-show-posts article:nth-of-type(5n+1) {clear:both;}

.is-smalltablet.page-id-xxx .atw-show-posts article {float:left;width:32.66%;margin-right:1%;clear:none;}
.is-smalltablet.page-id-xxx .atw-show-posts article:nth-of-type(3n) {margin-right:0;}
.is-smalltablet.page-id-xxx .atw-show-posts article:nth-of-type(3n+1) {clear:both;}

.is-phone.page-id-xxx .atw-show-posts article {float:left;width:49.5%;margin-right:1%;clear:none;}
.is-phone.page-id-xxx .atw-show-posts article:nth-of-type(2n) {margin-right:0;}
.is-phone.page-id-xxx .atw-show-posts article:nth-of-type(2n+1) {clear:both;}

If you want to create different number of columns, below is the way you calculate the width percentage for your own number of columns:

Total width=100%
If Number of columns is NC  then Number of spaces is NS = NC-1
If Space between columns is S then Total space used between columns is TS = S x NS
The Width of each column is 100% minus the space between columns divided by the number of columns
WC = (100 – TS)/C
Following that logic, here are the calculation for 5, 3 and 2 columns
with NC=5 and S=1% => NS=4 ; TS=4×1%=4% ; WC=(100-4)/5=19.2
with NC=3 and S=1% => NS=2 ; TS=2×1%=2% ; WC=(100-2)/3=32.66
with NC=2 and S=1% => NS=1 ; TS=1×1%=1% ; WC=(100-1)/2=45.5

 

Setting the number of columns based on the browser width

The rules discussed above used the Theme Mobile classes to target Desktop (over 768px wide), Small Tablets (between 580 and 768) and phones (below 580px)
If you need to target different browser sizes, like if for example you have a full width site and need different number of columns at even larger threshold, you can change the rules to use CSS @media rules.
Below is an example still targeting three different browser sizes with custom values.

@media and (min-width:1000px) {
.page-id-xxx .wvrx-posts article {float:left;width:19.2%;margin-right:1%;}
.page-id-xxx .wvrx-posts article:nth-of-type(5n) {margin-right:0;}
.page-id-xxx .wvrx-posts article:nth-of-type(5n+1) {clear:both;}
}

@media and (min-width:700px) and (max-width:999px) {
.page-id-xxx .wvrx-posts article {float:left;width:32.66%;margin-right:1%;clear:none;}
.page-id-xxx .wvrx-posts article:nth-of-type(3n) {margin-right:0;}
.page-id-xxx .wvrx-posts article:nth-of-type(3n+1) {clear:both;}
}

@media and (max-width:699px) {
.page-id-xxx .wvrx-posts article {float:left;width:49.5%;margin-right:1%;clear:none;}
.page-id-xxx .wvrx-posts article:nth-of-type(2n) {margin-right:0;}
.page-id-xxx .wvrx-posts article:nth-of-type(2n+1) {clear:both;}
}

 

.page-id-xxx .atw-show-posts article ~ div {display:none;}
.page-id-xxx .atw-show-posts article {box-sizing:border-box;}

@media and (min-width:1000px) {
.page-id-xxx .atw-show-posts article {float:left;width:19.2%;margin-right:1%;}
.page-id-xxx .atw-show-posts article:nth-of-type(5n) {margin-right:0;}
.page-id-xxx .atw-show-posts article:nth-of-type(5n+1) {clear:both;}
}

@media and (min-width:700px) and (max-width:999px) {
.page-id-xxx .atw-show-posts article {float:left;width:32.66%;margin-right:1%;clear:none;}
.page-id-xxx .atw-show-posts article:nth-of-type(3n) {margin-right:0;}
.page-id-xxx .atw-show-posts article:nth-of-type(3n+1) {clear:both;}
}

@media and (max-width:699px) {
.page-id-xxx .atw-show-posts article {float:left;width:49.5%;margin-right:1%;clear:none;}
.page-id-xxx .atw-show-posts article:nth-of-type(2n) {margin-right:0;}
.page-id-xxx .atw-show-posts article:nth-of-type(2n+1) {clear:both;}
}