Skip Navigation

[Resolved] Need help to create a masonry type grid layout

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.


This topic contains 2 replies, has 2 voices.

Last updated by Robert Campbell 7 years, 2 months ago.

Assigned support staff: Luo Yang.


I am trying to create a masonry style layout within my Toolset based website.

I tried the standard grid layout in views

<!-- wpv-loop-start -->
<table width="100%">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
[wpv-post-body view_template="Loop item in testgrid"]              
[wpv-item index=other]
[wpv-post-body view_template="Loop item in testgrid"]             
[wpv-item index=3]
[wpv-post-body view_template="Loop item in testgrid"]      
[wpv-item index=pad]
[wpv-item index=pad-last]
<!-- wpv-loop-end -->

which gets me to hidden link

But I need to stack the posts in each column in the masonry style.

I've had a look at a few of the third plug-ins but none of them offer enough flexibility in dealing with custom post types and slideshows.

Is it possible to construct a masonry style layout using views? It is such a popular style now so I hope you can suggest a way forward.




Luo Yang

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Dear Robert,

Are we talking about the masonry style layout like below site?
hidden link

I suggest you try create a view to output the HTML structure as the document:
hidden link

Hope it help


Dear Luo

The document is really good, thanks very much.