Different number of posts per row in grid layout

Question

Is there a way to return different number of posts per row in grid layout based on the post size retrieved from a custom field?

For example:

|              Large post              |
|   Medium post    |    Medium post    |
| Small post | Small post | Small post |
|   Medium post    |    Medium post    |
|              Large post              |

Rows order can be different. I get the post size value from the custom fields. I believe the logics is as follows:

1. get the size of a post
2. if it fits the row fully, close the row tag, open a new row tag and check the next post
3. if the post doesnt fit the entire row, get the next post size and check if it fits

etc.

Any practical ideas?

Thanks a lot.

EDIT: I've already studied a lot of code snippets, which are quite simple. However all of them refer to creating the same number of columns by means of $counter variable and modulus, i.e. dividing the loop into two/three/four column layout. I've never seen a snippet allowing different post sizes in the same grid layout.

Post size is defined in the custom post field. It can be checked by get_post_meta($post_id, '_post_size', true);

An example of the grid with different number of posts per row and different post sizes can be seen at Virgin.

Answer 1

This can be achieved by making use of Masonry a

Cascading grid layout library

Which is included in WordPress since 3.5 and has been updated to v3 with the release of version 3.9 of WP. It really is a nice tool to accomplish different kind of grid layouts. Of course it isn't necessary to use this library, but it is indeed really good for grid layouts, so you might as well make use of it.

There are a ton of how-to's and tutorials available, just take a look around and you will find them. Generally, the implementation is pretty straight forward and size management and control then works via CSS (and maybe some javascript/jQuery if you want to offer a switch for size changes).

As additional information, there is a - one could say - pro version of masonry available, which offers more functionality. It is called Isotope, if you want to take a look at it. Of course it isn't part of the WP core functionality, besides you need a - very affordable - license to use it commercially.