Masonry layouts are a popular way to display content in a compact, responsive grid. Whether you're building a portfolio, product gallery, or dynamic content wall, the Pinterest-style "masonry" layout offers a great way to make the most of vertical space without rigid rows. Today, I’ll show you how to build a fully dynamic masonry layout powered by Pockets VUE's masonry directive and a little PHP to generate the content.
The Setup
In my project, I created a custom page template called test-masonry.php. This template dynamically generates grid blocks using PHP and then applies the directive v-pockets-masonry to transform them into a masonry layout on the frontend.
The directive is included in Pockets VUE.
The cool part? The directive accepts the same configuration options you'd use with Masonry.js, meaning you get fine-tuned control with zero friction.
PHP: Generating the grid
To simulate a dynamic grid, I used PHP to generate a set of random blocks of varying heights and colors:
This gives us an array of block HTML elements, each styled to give a natural, masonry-friendly mismatch of heights and backgrounds.
Pockets VUE directive: v-pockets-masonry
The v-pockets-masonry directive wraps Masonry.js, binding it to any DOM node it’s attached to. Here's how it's used in the template:
The $options variable is encoded as JSON and bound directly into the directive. The Vue directive reads these options and initializes Masonry with them. Because this directive mirrors the API of Masonry.js, you can pass anything from itemSelector to gutter or columnWidth—whatever your grid needs.
You can also use Bootstrap’s grid classes (col-md-3, col-sm-4, etc.), so the layout adapts nicely to screen sizes. Add your spacing classes (p-half, p-1, etc.) and you’ve got a clean, responsive, animated grid that just works.