WP Query Loop Masonry

Download

How to Use Query Loop Masonry

Follow this step-by-step guide to create beautiful masonry layouts in WordPress.

Contents

1

Installation

2

Enable Masonry on Query Loop Block

→

Masonry Columns

→

Aspect Ratio Rules

→

Responsive Breakpoints

→

Gap/Gutter Spacing

Quick Start Guide

Already have the plugin installed? Get masonry working in 60 seconds!

1

Add a Query Loop block to your page

Click + and search for “Query Loop”

2

Open List View

Click the List View icon

3

Select Post Template block

Expand Query Loop → Click “Post Template”

4

Switch to Grid layout

In the toolbar, click the Grid icon

5

Enable Masonry in sidebar

Check “Enable masonry layout” in Settings panel

1.

Installation

1a

Download the Plugin

After purchasing, download the plugin ZIP file to your computer.

1b

Upload to WordPress

  1. Log in to your WordPress admin dashboard
  2. Go to Plugins → Add New
  3. Click Upload Plugin button at the top
  4. Click Choose File and select the ZIP file
  5. Click Install Now
  6. After installation completes, click the Activate Plugin button.

1c

Add Your License Key

To receive updates and support, activate your license.

Where to find your license: Your license key was sent to your email after purchase.

  1. Go to Plugins in your WordPress dashboard
  2. Find “Query Loop Masonry” in the list
  3. Look for the license field below the plugin description
  4. Paste your license key and click Activate License

2.

Enable Masonry on Query Loop Block

2a

Open the Block Editor

Create a new page or post, or edit an existing one where you want to add a masonry layout.

2b

Insert a Query Loop Block

Skip this step if you already have an existing Query Loop Block

  1. Click the + button to add a new block
  2. Search for “Query Loop”
  3. Select the Query Loop block
  4. Choose a starter pattern (any pattern will work)

2c

Open List View

List View shows all blocks in a tree structure, making it easy to select nested blocks.

  • Click the List View icon in the top toolbar

2d

Find the Post Template Block

In the List View panel, you’ll see your Query Loop and its nested blocks.

  1. Look for the Query Loop block in the list
  2. Click the arrow next to it to expand
  3. Click on Post Template to select it
  4. Choose a starter pattern (any pattern will work)

Important: Select “Post Template”, not other blocks like “Post Title”.

2e

Switch to Grid Layout

Required Step!

The masonry option will ONLY appear when Post Template is set to Grid layout.

With Post Template selected:

  1. Look at the block toolbar above the block or at the top of the editor
  2. Find the layout switcher icons (they look like different grid patterns)
  3. Click the Grid icon (looks like a grid of squares)

Once you switch to Grid, the masonry checkbox will appear in the sidebar!

2f

Enable Masonry Layout

Now that Post Template is set to Grid, the masonry controls will appear!

  1. Look at the right sidebar (Settings panel)
  2. Scroll down to find the “Masonry Layout” section
  3. Check the “Enable masonry layout” checkbox

What happens next: Your posts will immediately rearrange into a masonry layout!

Masonry Columns

Control how many columns your masonry layout has on different screen sizes.

In the Masonry Layout panel:

  1. Find the Columns slider or number input
  2. Adjust the number (1-16 columns available)
  3. Watch your layout update in real-time!

Aspect Ratio Rules

Make specific posts stand out by giving them different aspect ratios or widths.

What are aspect ratio rules?

They let you say things like:

  • “Make every 3rd post square (1:1)”
  • “Make only the 1st post wide (16:9)”

To add a rule:

  1. Click “Add Rule” button
  2. Choose an aspect ratio
  3. Select Mode: “Every Nth” or “Only Nth”
  4. Set the Position number

Every Nth

Applies to every 3rd, 5th, 10th post (repeating pattern)
Example: Every 3rd → positions 3, 6, 9, 12…

Only Nth

Applies to only one specific position
Example: Only 1st → position 1 only

Good to know: You can add multiple rules! They work together to create unique layouts.

Responsive Breakpoints

Make your layout look perfect on mobile, tablet, and desktop by using breakpoints.

What are breakpoints?

Different settings for different screen sizes. For example:

  • Mobile: 1 column
  • Tablet: 2 columns
  • Desktop: 4 columns

To add a breakpoint:

  1. Click “+” icon next to Screen Size Rules in the sidebar
  2. Select a breakpoint you want to target
  3. Set the number of columns for that size
  4. Optionally add aspect ratio rules specific to that breakpoint

Available Breakpoints:

Mobile

0-599px

Small

600-781px

Medium

782-959px

Large

960-1279px

Wide

1280-1439px

Huge

1440px+

Tip: Start with “All Devices” settings. Only add breakpoints if you need different layouts for mobile/tablet.

Gap/Gutter Spacing

Control the spacing between your masonry posts using WordPress native block spacing controls.

Important: This plugin uses WordPress Query Loop’s native grid block spacing. This means your settings work the same way whether masonry is enabled or not!

To adjust the gap:

  1. Make sure Post Template block is selected
  2. In the right sidebar, click the Styles tab
  3. Look for Block spacing section
  4. Adjust the spacing value

Need help?

If you run into any issues or have questions, I’m here to help!

Don’t hesitate to reach out to me at adam@wpqueryloopmasonry.com

Adam Husar / Pixel Hero

Plugin creator