How to Center Masonry Columns or Add Equal Space on Each Side

How To  Tutorials  Last Updated: Time to Read: Less than a minute

When enabling Masonry in your Content or Posts widgets, you may notice your columns are left-aligned to the page or container, leaving an extra 20px of space on the right. This is due to how the “gutter” is added to your columns – if you uncheck the Gutter under Columns / List Style, you will see this space go away.

This image illustrates how space (shown in blue) is added to the columns in the Layers grid when Gutter is enabled:

widget-column-padding

You can add padding to the widget to get an equal amount of space on the left if you wish to “center” the columns on the page. This is especially useful if you are using the Full Width layout.

  1. Click on the Advanced button in the widget design bar
  2. Enter 20  into the Left field of the Padding options.

widget-column-padding-advanced

The following shows how this works:

widget-column-padding-left